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

 
(14 intermediate revisions by the same user not shown)
Line 1: Line 1:
<html lang="en" dir="ltr" class="client-nojs" xmlns="http://www.w3.org/1999/html">
+
<html lang="en" dir="ltr" class="client-nojs">
 
+
<meta charset="UTF-8"/>
+
 
+
<style>
+
        /* Paste this css to your style sheet file or under head tag */
+
        /* This only works with JavaScript,
+
        if it's not present, don't show loader */
+
        .js #loader {
+
            display: block;
+
            position: absolute;
+
            left: 100px;
+
            top: 0;
+
        }
+
 
+
        .se-pre-con {
+
            position: fixed;
+
            left: 0px;
+
            top: 0px;
+
            width: 100%;
+
            height: 100%;
+
            z-index: 9999;
+
            background: #2B2B35;
+
        }
+
 
+
        .se-pre-con img {
+
            width: 40%;
+
            height: 40%;
+
            margin-left: 30%;
+
            margin-top: 15%;
+
        }
+
 
+
        @media screen and (min-width: 1500px ) {
+
            .se-pre-con img {
+
                margin-top: 20%;
+
                width: 25%;
+
                height: 15%;
+
                margin-left: 35%;
+
            }
+
        }
+
 
+
        @media screen and (max-width: 1100px ) {
+
            .se-pre-con img {
+
                margin-top: 20%;
+
                height: 30%;
+
                width: 50%;
+
                margin-left: 25%;
+
            }
+
        }
+
 
+
        @media screen and (max-width: 700px ) {
+
            .se-pre-con img {
+
                margin-top: 18%;
+
                height: 20%;
+
            }
+
        }
+
    </style>
+
</head>
+
<body>
+
<div class="se-pre-con">
+
    <img src="https://2019.igem.org/wiki/images/8/83/T--Tuebingen--preloader.gif">
+
</div>
+
<script src="https://2019.igem.org/Team:Tuebingen/jqueryLoadJS?action=raw&ctype=text/javascript"></script>
+
<script src="https://2019.igem.org/Team:Tuebingen/jmodernizerJS?action=raw&ctype=text/javascript"></script>
+
<script>
+
    $(window).load(function () {
+
        setTimeout(removeLoader, 1000);
+
    }); //wait for page load PLUS one seconds.
+
    function removeLoader() {
+
        $(".se-pre-con").fadeOut(500, function () {
+
            // fadeOut complete. Remove the loading div
+
            $(".se-pre-con").remove(); //makes page more lightweight
+
        });
+
    }
+
</script>
+
</body>
+
  
 +
<meta charset="UTF-8" content="width=device-width, initial-scale=1.0"/>
 
<style>
 
<style>
 
     /*!
 
     /*!
Line 163: Line 89:
 
     p {
 
     p {
 
         margin-top: 0;
 
         margin-top: 0;
         margin-bottom: 1rem;
+
         margin-bottom: 1rem
        color: #F4F0DE;
+
 
     }
 
     }
  
Line 2,977: Line 2,902:
 
     .btn-outline-dark:not(:disabled):not(.disabled).active:focus, .btn-outline-dark:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-dark.dropdown-toggle:focus {
 
     .btn-outline-dark:not(:disabled):not(.disabled).active:focus, .btn-outline-dark:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-dark.dropdown-toggle:focus {
 
         box-shadow: 0 0 0 .2rem rgba(52, 58, 64, .5)
 
         box-shadow: 0 0 0 .2rem rgba(52, 58, 64, .5)
 +
    }
 +
 +
    .btn-link {
 +
        font-weight: 400;
 +
        color: #007bff;
 +
        background-color: transparent
 +
    }
 +
 +
    .btn-link:hover {
 +
        color: #0056b3;
 +
        text-decoration: underline;
 +
        background-color: transparent;
 +
        border-color: transparent
 +
    }
 +
 +
    .btn-link.focus, .btn-link:focus {
 +
        text-decoration: underline;
 +
        border-color: transparent;
 +
        box-shadow: none
 +
    }
 +
 +
    .btn-link.disabled, .btn-link:disabled {
 +
        color: #6c757d;
 +
        pointer-events: none
 
     }
 
     }
  
Line 6,034: Line 5,983:
  
 
     .bg-dark {
 
     .bg-dark {
         background-color: #343a40 !important
+
         background-color: #232323 !important
 
     }
 
     }
  
Line 9,124: Line 9,073:
 
     }
 
     }
  
    .judges-will-not-evaluate {
 
        border: 4px solid #e4dede;
 
        padding: 2% !important;
 
        width: 92% !important;
 
    }
 
  
 
     /* OWN Global Settings */
 
     /* OWN Global Settings */
Line 9,260: Line 9,204:
  
  
     /* sponsor foooter */
+
     /* sponsor footer */
 
     .sponsorLogo img {
 
     .sponsorLogo img {
 
         padding: 8px;
 
         padding: 8px;
Line 9,283: Line 9,227:
  
 
     .dropdown-menu {
 
     .dropdown-menu {
         background-color: rgba(100, 100, 100, 1);
+
         background-color: #232323;
 
     }
 
     }
  
Line 9,295: Line 9,239:
 
     }
 
     }
  
/*++++++++++++++++++++++++++++++++
+
    /*++++++++++++++++++++++++++++++++
contents CSS ++++++++++++++++++++++++++++++*/
+
    contents CSS ++++++++++++++++++++++++++++++*/
 
     * {
 
     * {
 
         box-sizing: border-box;
 
         box-sizing: border-box;
Line 9,337: Line 9,281:
 
         text-transform: uppercase;
 
         text-transform: uppercase;
 
         letter-spacing: 0.125em;
 
         letter-spacing: 0.125em;
         color: #fff;
+
         color: #555;
 
     }
 
     }
  
Line 9,362: Line 9,306:
 
     .post-content h1 {
 
     .post-content h1 {
 
         padding-top: 30px;
 
         padding-top: 30px;
         color: #2ecc71;
+
         color: rgba(0, 158, 198, 1);
 
     }
 
     }
  
Line 9,368: Line 9,312:
 
     .post-content h2 {
 
     .post-content h2 {
 
         padding-top: 150px;
 
         padding-top: 150px;
         color: #2ecc71;
+
         color: rgba(0, 158, 198, 1);
 
     }
 
     }
  
 
     /* link color */
 
     /* link color */
 
     .post-content a {
 
     .post-content a {
         color: #2ecc71;
+
         color: #009EC6;
 
     }
 
     }
  
 
     #glpreferences a {
 
     #glpreferences a {
         color: #F4F0DE!important
+
         color: #009EC6;
 
     }
 
     }
 
    ol li {
 
  counter-increment: list;
 
  list-style-type: none;
 
  position: relative;
 
}
 
/* Outout the numbers using the counter() function, but use a custom color, and position the numbers how we want */
 
    ol li:before {
 
  color: #F4F0DE;
 
  content: counter(list) ".";
 
  left:-32px;
 
  position: absolute;
 
  text-align: right;
 
  width: 26px;
 
}
 
  
  
Line 9,404: Line 9,333:
 
         bottom: auto;
 
         bottom: auto;
 
         display: none;
 
         display: none;
         stroke: #2ecc71;
+
         stroke: #009EC6;
 
         transform: translateY(-50%);
 
         transform: translateY(-50%);
 
     }
 
     }
Line 9,433: Line 9,362:
 
         position: relative;
 
         position: relative;
 
         text-decoration: none;
 
         text-decoration: none;
         color: #fff;
+
         color: #333;
 
         font-weight: bold;
 
         font-weight: bold;
 
     }
 
     }
Line 9,439: Line 9,368:
 
     a.toc-reading,
 
     a.toc-reading,
 
     a.toc-already-read.toc-reading {
 
     a.toc-already-read.toc-reading {
         color: #2ecc71;
+
         color: #009EC6;
 
         opacity: 1;
 
         opacity: 1;
 
     }
 
     }
  
 
     a.toc-already-read {
 
     a.toc-already-read {
         opacity: 0.6;
+
         opacity: 0.4;
 
     }
 
     }
  
Line 9,459: Line 9,388:
 
         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;
         box-shadow: 0 3px 5px 0 black;
+
        border-radius: 50%;
         color: #fff;
+
         box-shadow: 0 0 0 1px #d9d9d9 inset;
 +
         color: #4d4d4d;
 
     }
 
     }
  
Line 9,468: Line 9,398:
  
 
     /*++++++++++++++++++++++++++++++++
 
     /*++++++++++++++++++++++++++++++++
contents End ++++++++++++++++++++++++++++++*/
+
    contents End ++++++++++++++++++++++++++++++*/
  
  
Line 9,665: Line 9,595:
 
     /*++++++++++++++++++++++++++++++++
 
     /*++++++++++++++++++++++++++++++++
 
gallery End ++++++++++++++++++++++++++++++*/
 
gallery End ++++++++++++++++++++++++++++++*/
 
 
     @media only screen and (max-width: 575.98px) {
 
     @media only screen and (max-width: 575.98px) {
 
     }
 
     }
Line 9,730: Line 9,659:
 
         }
 
         }
 
     }
 
     }
 +
 
</style>
 
</style>
    <head>
 
        <title>GLP.exe</title>
 
        <meta charset="utf-8">
 
        <meta name="viewport" content="width=device-width, initial-scale=1">
 
        <link rel="stylesheet" href="https://2019.igem.org/Template:Tuebingen/FontAwesomeCSS">
 
        <link rel="stylesheet" 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"/>
 
        <style>
 
            .mfp-bg {
 
                top: 0;
 
                left: 0;
 
                width: 100%;
 
                height: 100%;
 
                z-index: 1042;
 
                overflow: hidden;
 
                position: fixed;
 
                background: #0b0b0b;
 
                opacity: 0.8;
 
            }
 
  
            .mfp-wrap {
 
                top: 0;
 
                left: 0;
 
                width: 100%;
 
                height: 100%;
 
                z-index: 1043;
 
                position: fixed;
 
                outline: none !important;
 
                -webkit-backface-visibility: hidden;
 
            }
 
  
            .mfp-container {
+
<head>
                text-align: center;
+
    <title>GLP.exe</title>
                position: absolute;
+
    <meta charset="utf-8">
                width: 100%;
+
    <meta name="viewport" content="width=device-width, initial-scale=1">
                height: 100%;
+
    <link rel="stylesheet" href="https://2019.igem.org/Template:Tuebingen/FontAwesomeCSS">
                left: 0;
+
    <link rel="stylesheet" href="https://2019.igem.org/Team:Tuebingen/aosCSS?action=raw&ctype=text/css"/>
                top: 0;
+
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Righteous"/>
                padding: 0 8px;
+
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"
                box-sizing: border-box;
+
          type="text/css"/>
            }
+
    <script src="https://2019.igem.org/Team:Tuebingen/jqueryminjs?action=raw&amp;ctype=text/javascript"></script>
 
+
    <script src="https://2019.igem.org/Team:Tuebingen/popperjs?action=raw&amp;ctype=text/javascript"></script>
            .mfp-container:before {
+
    <script src="https://2019.igem.org/Team:Tuebingen/bootstrapjs?action=raw&amp;ctype=text/javascript"></script>
                content: '';
+
    <script src="https://2019.igem.org/Template:Tuebingen/GLPexeJS?action=raw&amp;ctype=text/javascript"></script>
                display: inline-block;
+
</head>
                height: 100%;
+
                vertical-align: middle;
+
            }
+
 
+
            .mfp-align-top .mfp-container:before {
+
                display: none;
+
            }
+
 
+
            .mfp-content {
+
                position: relative;
+
                display: inline-block;
+
                vertical-align: middle;
+
                margin: 0 auto;
+
                text-align: left;
+
                z-index: 1045;
+
            }
+
 
+
            .mfp-inline-holder .mfp-content,
+
            .mfp-ajax-holder .mfp-content {
+
                width: 100%;
+
                cursor: auto;
+
            }
+
 
+
            .mfp-ajax-cur {
+
                cursor: progress;
+
            }
+
 
+
            .mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
+
                cursor: -moz-zoom-out;
+
                cursor: -webkit-zoom-out;
+
                cursor: zoom-out;
+
            }
+
 
+
            .mfp-zoom {
+
                cursor: pointer;
+
                cursor: -webkit-zoom-in;
+
                cursor: -moz-zoom-in;
+
                cursor: zoom-in;
+
            }
+
 
+
            .mfp-auto-cursor .mfp-content {
+
                cursor: auto;
+
            }
+
 
+
            .mfp-close,
+
            .mfp-arrow,
+
            .mfp-preloader,
+
            .mfp-counter {
+
                -webkit-user-select: none;
+
                -moz-user-select: none;
+
                user-select: none;
+
            }
+
 
+
            .mfp-loading.mfp-figure {
+
                display: none;
+
            }
+
 
+
            .mfp-hide {
+
                display: none !important;
+
            }
+
 
+
            .mfp-preloader {
+
                color: #CCC;
+
                position: absolute;
+
                top: 50%;
+
                width: auto;
+
                text-align: center;
+
                margin-top: -0.8em;
+
                left: 8px;
+
                right: 8px;
+
                z-index: 1044;
+
            }
+
 
+
            .mfp-preloader a {
+
                color: #CCC;
+
            }
+
 
+
            .mfp-preloader a:hover {
+
                color: #FFF;
+
            }
+
 
+
            .mfp-s-ready .mfp-preloader {
+
                display: none;
+
            }
+
 
+
            .mfp-s-error .mfp-content {
+
                display: none;
+
            }
+
 
+
            button.mfp-close,
+
            button.mfp-arrow {
+
                overflow: visible;
+
                cursor: pointer;
+
                background: transparent;
+
                border: 0;
+
                -webkit-appearance: none;
+
                display: block;
+
                outline: none;
+
                padding: 0;
+
                z-index: 1046;
+
                box-shadow: none;
+
                touch-action: manipulation;
+
            }
+
 
+
            button::-moz-focus-inner {
+
                padding: 0;
+
                border: 0;
+
            }
+
 
+
            .mfp-close {
+
                width: 44px;
+
                height: 44px;
+
                line-height: 44px;
+
                position: absolute;
+
                right: 0;
+
                top: 0;
+
                text-decoration: none;
+
                text-align: center;
+
                opacity: 0.65;
+
                padding: 0 0 18px 10px;
+
                color: #FFF;
+
                font-style: normal;
+
                font-size: 28px;
+
                font-family: Arial, Baskerville, monospace;
+
            }
+
 
+
            .mfp-close:hover,
+
            .mfp-close:focus {
+
                opacity: 1;
+
            }
+
 
+
            .mfp-close:active {
+
                top: 1px;
+
            }
+
 
+
            .mfp-close-btn-in .mfp-close {
+
                color: #333;
+
            }
+
 
+
            .mfp-image-holder .mfp-close,
+
            .mfp-iframe-holder .mfp-close {
+
                color: #FFF;
+
                right: -6px;
+
                text-align: right;
+
                padding-right: 6px;
+
                width: 100%;
+
            }
+
 
+
            .mfp-counter {
+
                position: absolute;
+
                top: 0;
+
                right: 0;
+
                color: #CCC;
+
                font-size: 12px;
+
                line-height: 18px;
+
                white-space: nowrap;
+
            }
+
 
+
            .mfp-arrow {
+
                position: absolute;
+
                opacity: 0.65;
+
                margin: 0;
+
                top: 50%;
+
                margin-top: -55px;
+
                padding: 0;
+
                width: 90px;
+
                height: 110px;
+
                -webkit-tap-highlight-color: transparent;
+
            }
+
 
+
            .mfp-arrow:active {
+
                margin-top: -54px;
+
            }
+
 
+
            .mfp-arrow:hover,
+
            .mfp-arrow:focus {
+
                opacity: 1;
+
            }
+
 
+
            .mfp-arrow:before,
+
            .mfp-arrow:after {
+
                content: '';
+
                display: block;
+
                width: 0;
+
                height: 0;
+
                position: absolute;
+
                left: 0;
+
                top: 0;
+
                margin-top: 35px;
+
                margin-left: 35px;
+
                border: medium inset transparent;
+
            }
+
 
+
            .mfp-arrow:after {
+
                border-top-width: 13px;
+
                border-bottom-width: 13px;
+
                top: 8px;
+
            }
+
 
+
            .mfp-arrow:before {
+
                border-top-width: 21px;
+
                border-bottom-width: 21px;
+
                opacity: 0.7;
+
            }
+
 
+
            .mfp-arrow-left {
+
                left: 0;
+
            }
+
 
+
            .mfp-arrow-left:after {
+
                border-right: 17px solid #FFF;
+
                margin-left: 31px;
+
            }
+
 
+
            .mfp-arrow-left:before {
+
                margin-left: 25px;
+
                border-right: 27px solid #3F3F3F;
+
            }
+
 
+
            .mfp-arrow-right {
+
                right: 0;
+
            }
+
 
+
            .mfp-arrow-right:after {
+
                border-left: 17px solid #FFF;
+
                margin-left: 39px;
+
            }
+
 
+
            .mfp-arrow-right:before {
+
                border-left: 27px solid #3F3F3F;
+
            }
+
 
+
            .mfp-iframe-holder {
+
                padding-top: 40px;
+
                padding-bottom: 40px;
+
            }
+
 
+
            .mfp-iframe-holder .mfp-content {
+
                line-height: 0;
+
                width: 100%;
+
                max-width: 900px;
+
            }
+
 
+
            .mfp-iframe-holder .mfp-close {
+
                top: -40px;
+
            }
+
 
+
            .mfp-iframe-scaler {
+
                width: 100%;
+
                height: 0;
+
                overflow: hidden;
+
                padding-top: 56.25%;
+
            }
+
 
+
            .mfp-iframe-scaler iframe {
+
                position: absolute;
+
                display: block;
+
                top: 0;
+
                left: 0;
+
                width: 100%;
+
                height: 100%;
+
                box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
+
                background: #000;
+
            }
+
 
+
            /* Main image in popup */
+
            img.mfp-img {
+
                width: auto;
+
                max-width: 100%;
+
                height: auto;
+
                display: block;
+
                line-height: 0;
+
                box-sizing: border-box;
+
                padding: 40px 0 40px;
+
                margin: 0 auto;
+
            }
+
 
+
            /* The shadow behind the image */
+
            .mfp-figure {
+
                line-height: 0;
+
            }
+
 
+
            .mfp-figure:after {
+
                content: '';
+
                position: absolute;
+
                left: 0;
+
                top: 40px;
+
                bottom: 40px;
+
                display: block;
+
                right: 0;
+
                width: auto;
+
                height: auto;
+
                z-index: -1;
+
                box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
+
                background: #444;
+
            }
+
 
+
            .mfp-figure small {
+
                color: #BDBDBD;
+
                display: block;
+
                font-size: 12px;
+
                line-height: 14px;
+
            }
+
 
+
            .mfp-figure figure {
+
                margin: 0;
+
            }
+
 
+
            .mfp-bottom-bar {
+
                margin-top: -36px;
+
                position: absolute;
+
                top: 100%;
+
                left: 0;
+
                width: 100%;
+
                cursor: auto;
+
            }
+
 
+
            .mfp-title {
+
                text-align: left;
+
                line-height: 18px;
+
                color: #F3F3F3;
+
                word-wrap: break-word;
+
                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-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-arrow {
+
                    -webkit-transform: scale(0.75);
+
                    transform: scale(0.75);
+
                }
+
 
+
                .mfp-arrow-left {
+
                    -webkit-transform-origin: 0;
+
                    transform-origin: 0;
+
                }
+
 
+
                .mfp-arrow-right {
+
                    -webkit-transform-origin: 100%;
+
                    transform-origin: 100%;
+
                }
+
 
+
                .mfp-container {
+
                    padding-left: 6px;
+
                    padding-right: 6px;
+
                }
+
            }
+
 
+
            .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);
+
            }
+
 
+
            .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;
+
            }
+
 
+
            .mfp-zoom-out.mfp-removing .mfp-with-anim {
+
                transform: scale(1.3);
+
                opacity: 0;
+
            }
+
 
+
            .mfp-zoom-out.mfp-removing.mfp-bg {
+
                opacity: 0;
+
            }
+
        </style>
+
 
+
    </head>
+
  
 
<body style="">
 
<body style="">
  <section id="nav-placeholder">
+
<section id="nav-placeholder">
 
     <nav class="shadow navbar navbar-expand-md navbar-dark fixed-top"
 
     <nav class="shadow navbar navbar-expand-md navbar-dark fixed-top"
 
         style="background-color: rgba(30, 30, 30, 0.3); z-index: 100;">
 
         style="background-color: rgba(30, 30, 30, 0.3); z-index: 100;">
Line 10,240: Line 9,694:
 
                 <li id="ourStoryButton" class="nav-item mx-3">
 
                 <li id="ourStoryButton" class="nav-item mx-3">
 
                     <a class="nav-link" href="/Team:Tuebingen/Story"
 
                     <a class="nav-link" href="/Team:Tuebingen/Story"
                       style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">OUR STORY</a>
+
                       style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">OUR
 +
                        STORY</a>
 
                 </li>
 
                 </li>
  
Line 10,257: Line 9,712:
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Incretin"
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Incretin"
 
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Incretin</a>
 
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Incretin</a>
                         <a class="dropdown-item" href="/Team:Tuebingen/CPP"
+
                         <a class="dropdown-item" href="/Team:Tuebingen/Model"
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Cell Penetrating Peptides</a>
+
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Model</a>
 +
                        <a class="dropdown-item" href="/Team:Tuebingen/Software"
 +
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Software</a>
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Results"
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Results"
 
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Results</a>
 
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Results</a>
Line 10,265: Line 9,722:
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Notebook"
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Notebook"
 
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Notebook</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; color: #2ecc71;">Model</a>
 
                        <a class="dropdown-item" href="/Team:Tuebingen/Software"
 
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Software</a>
 
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Outlook"
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Outlook"
 
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Outlook</a>
 
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Outlook</a>
 +
                        <a class="dropdown-item" href="/Team:Tuebingen/Entrepreneurship"
 +
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Entrepreneurship</a>
 
                     </div>
 
                     </div>
 
                 </li>
 
                 </li>
Line 10,280: Line 9,735:
 
                     <div class="dropdown-menu">
 
                     <div class="dropdown-menu">
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Parts"
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Parts"
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Parts Overview</a>
+
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Parts
 +
                            Overview</a>
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Basic_Part"
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Basic_Part"
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Basic Parts</a>
+
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Basic
 +
                            Parts</a>
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Improved_Part"
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Improved_Part"
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Improved Parts</a>
+
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Improved
 +
                            Parts</a>
 +
                        <a class="dropdown-item" href="/Team:Tuebingen/Characterized_Part"
 +
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Characterized
 +
                            Parts</a>
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Composite_Part"
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Composite_Part"
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Composite Parts</a>
+
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Composite
 +
                            Parts</a>
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Part_Collection"
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Part_Collection"
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Part Collection</a>
+
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Part
 +
                            Collection</a>
 +
                        <a class="dropdown-item" href="/Team:Tuebingen/Downloads"
 +
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Downloads</a>
 
                     </div>
 
                     </div>
 
                 </li>
 
                 </li>
Line 10,302: Line 9,767:
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Collaborations"
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Collaborations"
 
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Collaborations</a>
 
                           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"
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Sponsors"
 
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Sponsors</a>
 
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Sponsors</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/Gallery"
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Gallery"
 
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Gallery</a>
 
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Gallery</a>
Line 10,320: Line 9,785:
 
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Overview</a>
 
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Overview</a>
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Public_Engagement"
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Public_Engagement"
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Education & Public
+
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Education & Public Engagement</a>
                            Engagement</a>
+
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Experts"
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Experts"
 
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Experts</a>
 
                           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"
 
                         <a class="dropdown-item" href="/Team:Tuebingen/SDG"
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Sustainable Development
+
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Sustainable Development Goals</a>
                            Goals</a>
+
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Experimenta"
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Experimenta"
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Experimenta Science
+
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Experimenta
                             Center</a>
+
                             Science Center</a>
 +
                        <a class="dropdown-item" href="/Team:Tuebingen/Survey"
 +
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Survey</a>
 
                     </div>
 
                     </div>
 
                 </li>
 
                 </li>
Line 10,343: Line 9,806:
 
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Integrated Human Practise</a>
 
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Integrated Human Practise</a>
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Public_Engagement"
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Public_Engagement"
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Education & Public
+
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Education & Public Engagement</a>
                            Engagement</a>
+
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Entrepreneurship"
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Entrepreneurship"
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Supporting
+
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Supporting Entrepreneurship</a>
                            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"
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Model"
 
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Model</a>
 
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Model</a>
Line 10,364: Line 9,823:
 
                 <li class="nav-item mx-3">
 
                 <li class="nav-item mx-3">
 
                     <a class="nav-link" href="https://igem.org/2019_Judging_Form?team=Tuebingen" target="_blank"
 
                     <a class="nav-link" href="https://igem.org/2019_Judging_Form?team=Tuebingen" target="_blank"
                       style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">JUDGING
+
                       style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">JUDGING FORM ⇗</a>
                        FORM ⇗</a>
+
 
                 </li>
 
                 </li>
  
Line 10,394: Line 9,852:
 
<script src="https://2019.igem.org/Team:Tuebingen/bootstrapjs?action=raw&ctype=text/javascript"></script>
 
<script src="https://2019.igem.org/Team:Tuebingen/bootstrapjs?action=raw&ctype=text/javascript"></script>
 
<script src="https://2019.igem.org/Template:Tuebingen/GLPexeJS?action=raw&ctype=text/javascript"></script>
 
<script src="https://2019.igem.org/Template:Tuebingen/GLPexeJS?action=raw&ctype=text/javascript"></script>
 +
<script src="https://2019.igem.org/Team:Tuebingen/aosJS?action=raw&ctype=text/javascript"></script>
 +
<script>
 +
    AOS.init();
 +
</script>
 +
 
</body>
 
</body>
 +
  
 
<style>
 
<style>
  
     .pictureTitle {
+
     /* Scroll Down Icon*/
         background: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .5)), url("http://2018.igem.org/wiki/images/2/21/T--Munich--header_projectdesign.png");
+
    #goToBox {
         background-repeat: no-repeat;
+
         position: relative;
         background-size: cover;
+
         width: 30px;
         background-position: center;
+
         height: 28px;
 +
         left: calc(50% - 15px);
 
     }
 
     }
  
 +
    .chevron {
 +
        position: absolute;
 +
        width: 28px;
 +
        height: 8px;
 +
        opacity: 0;
 +
        transform: scale3d(0.5, 0.5, 0.5);
 +
        animation: move 3s ease-out infinite;
 +
    }
  
     @media only screen and (max-width: 575.98px) {
+
     .chevron:first-child {
 +
        animation: move 3s ease-out 1s infinite;
 
     }
 
     }
  
     @media only screen and (max-width: 767.98px) {
+
     .chevron:nth-child(2) {
 +
        animation: move 3s ease-out 2s infinite;
 
     }
 
     }
  
     @media only screen and (max-width: 991.98px) {
+
     .chevron:before,
 +
    .chevron:after {
 +
        content: ' ';
 +
        position: absolute;
 +
        top: 0;
 +
        height: 100%;
 +
        width: 51%;
 +
        background: #fff;
 
     }
 
     }
  
     @media only screen and (max-width: 1199.98px) {
+
     .chevron:before {
 +
        left: 0;
 +
        transform: skew(0deg, 30deg);
 
     }
 
     }
  
     /*
+
     .chevron:after {
========================
+
        right: 0;
    BUTTON STYLE BEGIN
+
        width: 50%;
========================
+
        transform: skew(0deg, -30deg);
*/
+
    }
  
.btn-link {
+
    @keyframes move {
         font-weight: 400;
+
         25% {
         color: #007bff;
+
            opacity: 1;
         background-color: transparent
+
 
 +
         }
 +
        33% {
 +
            opacity: 1;
 +
            transform: translateY(30px);
 +
         }
 +
        67% {
 +
            opacity: 1;
 +
            transform: translateY(40px);
 +
        }
 +
        100% {
 +
            opacity: 0;
 +
            transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
 +
        }
 
     }
 
     }
  
     .btn-link:hover {
+
     @keyframes pulse {
         color: #0056b3;
+
         to {
        text-decoration: underline;
+
            opacity: 1;
         background-color: transparent;
+
         }
        border-color: transparent
+
 
     }
 
     }
  
     .btn-link.focus, .btn-link:focus {
+
 
         text-decoration: underline;
+
    /* FlowChart*/
         border-color: transparent;
+
     .circleO {
         box-shadow: none
+
         height: 60px;
 +
        width: 60px;
 +
        padding: auto;
 +
         border-radius: 50%;
 +
        background-color: rgba(230, 230, 230, 1);
 +
         color: black;
 +
        z-index: 2;
 
     }
 
     }
  
     .btn-link.disabled, .btn-link:disabled {
+
     .circleO img {
         color: #6c757d;
+
         max-height: 40px;
         pointer-events: none
+
         width: auto;
 
     }
 
     }
  
     .btn-link{
+
     .circleS {
opacity: 0.8;
+
        height: 60px;
text-decoration: none;
+
        width: 60px;
color: white;
+
        padding: auto;
}
+
        border-radius: 50%;
.btn-link:hover{
+
        background-image: linear-gradient(rgba(1, 101, 224, 1), rgba(0, 203, 177, 1));
opacity: 1;
+
        color: black;
text-decoration: none;
+
        z-index: 2;
    color: rgba(105, 202, 98, 1.1);
+
    }
}
+
.btn-link:focus{
+
opacity: 1;
+
text-decoration: none;
+
    color: rgba(105, 202, 98, 1.1);
+
}
+
.card-header{
+
background-color: rgba(50,50,50,1);
+
}
+
.card button{
+
width: 100%;
+
font-size: 1.5rem;
+
}
+
    /*
+
========================
+
    BUTTON STYLE END
+
========================
+
*/
+
  
     /*
+
     .circleS img {
========================
+
        max-height: 40px;
      BUTTON ONE
+
        width: auto;
========================
+
    }
*/
+
.btn-one {
+
color: rgba(105, 202, 98, 1.1);
+
transition: all 0.3s;
+
position: relative;
+
}
+
.btn-one span {
+
transition: all 0.3s;
+
}
+
.btn-one::before {
+
content: '';
+
position: absolute;
+
bottom: 0;
+
left: 0;
+
width: 100%;
+
height: 100%;
+
z-index: 1;
+
opacity: 0;
+
transition: all 0.3s;
+
border-top-width: 1px;
+
border-bottom-width: 1px;
+
border-top-style: solid;
+
border-bottom-style: solid;
+
border-top-color: rgba(105, 202, 98, 1.1);
+
border-bottom-color: rgba(105, 202, 98, 1.1);
+
transform: scale(0.1, 1);
+
}
+
.btn-one:hover span {
+
letter-spacing: 2px;
+
}
+
.btn-one:hover::before {
+
opacity: 1;
+
transform: scale(1, 1);
+
}
+
.btn-one::after {
+
content: '';
+
position: absolute;
+
bottom: 0;
+
left: 0;
+
width: 100%;
+
height: 100%;
+
z-index: 1;
+
transition: all 0.3s;
+
background-color: rgba(255,255,255,0.05);
+
}
+
.btn-one:hover::after {
+
opacity: 0;
+
transform: scale(0.1, 1);}
+
    /*
+
========================
+
      BUTTON ONE END
+
========================
+
*/
+
  
     /*
+
     .circleM {
    ======================
+
        height: 100px;
    HEADER BANNER STYLE BEGIN
+
        width: 100px;
    ==========================
+
        padding: auto;
     */
+
        border-radius: 50%;
 +
        background-image: linear-gradient(rgba(1, 101, 224, 1), rgba(0, 203, 177, 1));
 +
        color: black;
 +
        z-index: 2;
 +
        1, 101, 224
 +
     }
  
     .header {
+
     .circleM img {
        position: relative;
+
         max-height: 80px;
        overflow: hidden;
+
         width: auto;
        display: flex;
+
        flex-wrap: wrap;
+
        justify-content: center;
+
        align-items: flex-start;
+
        align-content: flex-start;
+
        height: 50vh;
+
         max-height: 350px;
+
         min-width: 300px;
+
        color: #eee;
+
 
     }
 
     }
  
     .header:after {
+
     .circleL {
 +
        height: 160px;
 +
        width: 160px;
 +
        padding: auto;
 +
        border-radius: 50%;
 +
        background-image: linear-gradient(rgba(1, 101, 224, 1), rgba(0, 203, 177, 1));
 +
        color: black;
 +
        z-index: 2;
 +
    }
 +
 
 +
    .circleL img {
 +
        max-height: 130px;
 +
        width: auto;
 +
    }
 +
 
 +
    #conceptFlow h5 {
 +
        font-weight: bold;
 +
        font-size: 2rem;
 +
        margin-bottom: 30px;
 +
        color: #009ec6;
 +
    }
 +
 
 +
    #conceptFlow span {
 +
        font-size: 1.5rem;
 +
    }
 +
 
 +
    /* height of each section*/
 +
    .how-it-works.row {
 +
        height: 50vh
 +
    }
 +
 
 +
    .how-it-works.row .col-3 {
 +
        align-self: stretch;
 +
    }
 +
 
 +
    .how-it-works.row .col-3::after {
 
         content: "";
 
         content: "";
        width: 100%;
 
        height: 100%;
 
 
         position: absolute;
 
         position: absolute;
         bottom: 0;
+
         border-left: 3px solid rgba(82, 187, 199, 1);
        left: 0;
+
         z-index: 1;
         z-index: -1;
+
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 40%, rgba(27, 32, 48, 1) 100%);
+
 
     }
 
     }
  
     .header:before {
+
     .diagnosis.row .col-3::after {
 
         content: "";
 
         content: "";
        width: 100%;
 
        height: 100%;
 
 
         position: absolute;
 
         position: absolute;
 +
        border-left: 3px dotted rgba(82, 187, 199, 1);
 +
        z-index: 1;
 +
    }
 +
 +
    .how-it-works.row .col-3.bottom::after {
 +
        height: 50%;
 +
        left: 50%;
 +
        top: 50%;
 +
    }
 +
 +
    .how-it-works.row .col-3.full::after {
 +
        height: 100%;
 +
        left: calc(50% - 3px);
 +
    }
 +
 +
    .how-it-works.row .col-3.fullRight::after {
 +
        height: 100%;
 +
        left: 50%;
 +
    }
 +
 +
    .how-it-works.row .col-3.top::after {
 +
        height: 50%;
 +
        left: calc(50% - 3px);
 
         top: 0;
 
         top: 0;
         left: 0;
+
         border: 2px dotted rgba(82, 187, 199, 1);
        -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/2/2c/T--Tuebingen--sdg-banner.jpg) center no-repeat;
+
        background-size: 100%, 100%;
+
        animation: grow 30s linear 10ms infinite;
+
        transition: all 0.2s ease-in-out;
+
        z-index: -2
+
 
     }
 
     }
  
     .header a {
+
 
         color: #eee
+
     .timeline div {
 +
         padding: 0;
 +
        height: 40px;
 
     }
 
     }
  
     .info {
+
     .timeline hr {
 +
        border-top: 3px solid rgba(82, 187, 199, 1);
 +
        background-color: transparent;
 +
        margin: 0;
 +
        top: 17px;
 +
        position: relative;
 +
    }
 +
 
 +
    .timeline .col-3 {
 +
        display: flex;
 +
        overflow: hidden;
 +
    }
 +
 
 +
    .timeline .corner {
 +
        border: 3px solid rgba(82, 187, 199, 1);
 
         width: 100%;
 
         width: 100%;
         padding: 15% 10% 0 10%;
+
         position: relative;
         text-align: center;
+
         border-radius: 15px;
        text-shadow: 0 2px 3px rgba(0, 0, 0, 0.2)
+
 
     }
 
     }
  
     .info h1{
+
     .timeline .top-right {
         font-size:3.0em;
+
         left: 50%;
 +
        top: -50%;
 
     }
 
     }
  
     .info h4, .meta {
+
     .timeline .left-bottom {
         font-size: 0.7em
+
         left: -50%;
 +
        top: calc(50% - 3px);
 
     }
 
     }
  
     @media only screen and (min-width: 2250px) {
+
     .timeline .top-left {
         .info h1 {
+
         left: -50%;
            margin-top: -50%;
+
         top: -50%;
         }
+
 
     }
 
     }
  
     @media only screen and (min-width: 2000px) {
+
     .timeline .right-bottom {
         .info h1 {
+
         left: 50%;
            margin-top: -10%;
+
         top: calc(50% - 3px);
         }
+
 
     }
 
     }
  
     @media only screen and (min-width: 1500px) {
+
     /* Qoutes Part*/
         .info h1 {
+
    #warnPics {
            margin-top: -5%;
+
         height: auto;
         }
+
        min-height: 20vw;
 +
         font-weight: 100;
 
     }
 
     }
  
     @media only screen and (max-width: 800px) {
+
     #warnPics .qoutes span {
         .info h1 {
+
        font-size: 1.5rem;
            margin-top: 9%;
+
    }
            font-size: 2.3em;
+
 
            text-align: center;
+
    #warnPics .qoutes {
 +
 
 +
    }
 +
 
 +
    #qoute1 {
 +
        background: linear-gradient(rgba(35, 35, 35, 1), rgba(35, 35, 35, .3), rgba(35, 35, 35, 1)), url("http://2018.igem.org/wiki/images/c/c9/T--Munich--death_background.png");
 +
        background-repeat: no-repeat;
 +
        background-size: cover;
 +
        background-position: center;
 +
        color: #fff;
 +
    }
 +
 
 +
    #qoute2 {
 +
        background: linear-gradient(rgba(35, 35, 35, 1), rgba(35, 35, 35, .3), rgba(35, 35, 35, 1)), url("http://2018.igem.org/wiki/images/4/4e/T--Munich--WarningPic1.jpg");
 +
        background-repeat: no-repeat;
 +
        background-size: cover;
 +
        background-position: center;
 +
        color: #fff;
 +
    }
 +
 
 +
    #qoute3 {
 +
         background: linear-gradient(rgba(35, 35, 35, 1), rgba(35, 35, 35, .3), rgba(35, 35, 35, 1)), url("http://2018.igem.org/wiki/images/6/66/T--Munich--PHAGE.jpg");
 +
        background-repeat: no-repeat;
 +
        background-size: cover;
 +
        background-position: top;
 +
        color: #fff;
 +
    }
 +
 
 +
    #whyTitle {
 +
        background: rgba(35, 35, 35, 1);
 +
    }
 +
 
 +
    .warningContent span {
 +
        font-size: 2.5rem;
 +
        font-weight: bold;
 +
    }
 +
 
 +
    .mobileText {
 +
        font-size: 1.5rem !important;
 +
        margin-top: 3rem;
 +
    }
 +
 
 +
 
 +
    #conceptFlowTitle {
 +
        font-size: 2.5rem;
 +
        font-weight: bold;
 +
    }
 +
 
 +
 
 +
    /* START PopUp STYLES */
 +
    .labelBox {
 +
        display: inline;
 +
    }
 +
 
 +
    .reg {
 +
        background-color: white;
 +
        display: inline;
 +
        margin: 0 auto;
 +
        width: auto;
 +
        font-size: 16.996px;
 +
        line-height: 20px;
 +
        padding: 12px 18px 13px;
 +
        -webkit-border-radius: 6px;
 +
        -moz-border-radius: 6px;
 +
        -ms-border-radius: 6px;
 +
        -o-border-radius: 6px;
 +
        border-radius: 6px;
 +
        -webkit-transition: all 0.3s ease-in-out;
 +
        -moz-transition: all 0.3s ease-in-out;
 +
        transition: all 0.3s ease-in-out;
 +
        color: #009ec6;
 +
        cursor: pointer;
 +
        border: none;
 +
        text-decoration: underline;
 +
    }
 +
 
 +
    .reg:hover {
 +
        opacity: 0.8;
 +
        -webkit-transition: all 0.3s ease-in-out;
 +
        -moz-transition: all 0.3s ease-in-out;
 +
        transition: all 0.3s ease-in-out;
 +
    }
 +
 
 +
    .pop {
 +
        display: none;
 +
        position: absolute;
 +
        top: 75%;
 +
        max-width: 100%;
 +
        height: auto;
 +
        -webkit-border-radius: 6px;
 +
        -moz-border-radius: 6px;
 +
        -ms-border-radius: 6px;
 +
        -o-border-radius: 6px;
 +
        border-radius: 6px;
 +
        z-index: 200;
 +
        padding: 10px;
 +
        background-color: rgba(240, 240, 240, 1);
 +
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 +
    }
 +
 
 +
    .pop > h1 {
 +
        color: #009ec6;
 +
        font-size: 100%;
 +
    }
 +
 
 +
    .pop > p {
 +
        font-size: 100%;
 +
        color: #777777;
 +
    }
 +
 
 +
    .pop > span {
 +
        cursor: pointer;
 +
        position: absolute;
 +
        top: 10px;
 +
        right: 10px;
 +
        -webkit-border-radius: 100px;
 +
        -moz-border-radius: 100px;
 +
        color: #777777;
 +
        width: 30px;
 +
        height: 30px;
 +
    }
 +
 
 +
    /* END PopUp STYLES */
 +
 
 +
    .mobileTitle {
 +
        font-size: 3.5rem !important;
 +
    }
 +
 
 +
    .readButton, .readButton:visited {
 +
        color: #17a2b8;
 +
    }
 +
 
 +
    .readButton:hover {
 +
        color: white;
 +
    }
 +
 
 +
    .showCase .row {
 +
        padding-left: 10vw;
 +
        padding-right: 10vw;
 +
    }
 +
 
 +
    @media only screen and (max-width: 767.98px) {
 +
        #videoBox #videoShow {
 +
            position: relative;
 
         }
 
         }
  
         .header {
+
         #PhactoryTitle {
             height: 45vh;
+
             font-size: 4rem;
 
         }
 
         }
    }
 
  
    @media only screen and (max-width: 660px) {
+
         #PhactoryText {
         .info h1 {
+
             font-size: 1.5rem;
            margin-top: 10%;
+
             font-size: 2.3em;
+
 
         }
 
         }
  
         .header {
+
         .warningContent span {
             height:40vh
+
             font-size: 1.5rem;
 
         }
 
         }
    }
 
  
    @media only screen and (max-width: 600px) {
+
        @media screen and (max-width: 500px) {
        .header {
+
            .warningContent span {
            height:35vh
+
                font-size: 1.5rem;
 +
            }
 
         }
 
         }
    }
 
  
    @media only screen and (max-width: 560px) {
+
         #warnPics .qoutes {
         .info h1 {
+
             font-size: 1rem;
             margin-top: 15%;
+
 
         }
 
         }
    }
 
  
    @media only screen and (max-width: 500px) {
+
         #compareBox img {
         .header {
+
             max-height: 20vh;
             height:30vh
+
            width: auto;
 
         }
 
         }
    }
 
  
    @media only screen and (max-width: 470px) {
+
         .mobileTitle {
         .info h1 {
+
             font-size: 3rem !important;
            margin-top: 10%;
+
             font-size: 1.9em;
+
 
         }
 
         }
    }
 
  
    @media only screen and (max-width: 450px) {
+
        @media screen and (max-width: 450px) {
        .header {
+
            .mobileTitle {
            height:25vh
+
                font-size: 2.0rem !important;
 +
            }
 
         }
 
         }
    }
 
  
    @media only screen and (max-width: 400px) {
+
         #conceptFlowTitle {
         .info h1 {
+
             font-size: 2rem;
             margin-top: 15%;
+
            font-weight: bold;
 
         }
 
         }
    }
 
  
    @media only screen and (max-width: 350px) {
+
         #conceptFlow h5 {
         .info h1 {
+
             font-size: 1.5rem;
             margin-top: 18%;
+
 
         }
 
         }
    }
 
  
    @keyframes grow {
+
         #conceptFlow span {
         0% {
+
             font-size: 1rem;
             transform: scale(1)
+
 
         }
 
         }
         50% {
+
 
             transform: scale(1.2)
+
         .how-it-works.row {
 +
             height: auto;
 +
        }
 +
 
 +
        /* FlowChart*/
 +
        .circleO {
 +
            height: 40px;
 +
            width: 40px;
 +
        }
 +
 
 +
        .circleO img {
 +
            max-height: 25px;
 +
            width: auto;
 +
        }
 +
 
 +
        .circleS {
 +
            height: 40px;
 +
            width: 40px;
 +
        }
 +
 
 +
        .circleS img {
 +
            max-height: 25px;
 +
            width: auto;
 +
        }
 +
 
 +
        .circleM {
 +
            height: 50px;
 +
            width: 50px;
 +
        }
 +
 
 +
        .circleM img {
 +
            max-height: 35px;
 +
            width: auto;
 +
        }
 +
 
 +
        .circleL {
 +
            height: 60px;
 +
            width: 60px;
 +
        }
 +
 
 +
        .circleL img {
 +
            max-height: 45px;
 +
            width: auto;
 +
        }
 +
 
 +
        .reg {
 +
            padding: 0;
 +
        }
 +
 
 +
        .mobileText {
 +
            font-size: 1rem !important;
 +
            margin-top: 0;
 +
        }
 +
 
 +
        .showCase .row {
 +
            padding: 0;
 
         }
 
         }
 
     }
 
     }
  
     /*  ======================
+
     @media only screen and (max-width: 991.98px) {
        HEADER BANNER STYLE END
+
    }
        ==========================
+
        */
+
  
 +
    @media only screen and (max-width: 1199.98px) {
 +
    }
 
</style>
 
</style>
  
<!-- Header Banner Begin-->
+
<script>
<div class="header">
+
    // Scroll Down Icon
  <div class="info">
+
    $(document).ready(function () {
    <h1 style="font-family: 'Righteous', cursive; font-weight: normal; color:#2ecc71;">GENERAL HEADER</h1>
+
        // Add smooth scrolling to all links
  </div>
+
        $("#goTo").on('click', function (event) {
</div>
+
<!-- Header Banner End-->
+
  
<div style="background-color: #232323;">
+
            // Make sure this.hash has a value before overriding default behavior
 +
            if (this.hash !== "") {
 +
                // Prevent default anchor click behavior
 +
                event.preventDefault();
  
<div class="glpContainer">
+
                // Store hash
    <aside id="glpContentsOuter">
+
                var hash = this.hash;
        <aside id="phaContents" class="table-of-contents">
+
            <!-- will be generated with JS -->
+
        </aside>
+
    </aside>
+
  
    <main class="post-content">
+
                // Using jQuery's animate() method to add smooth page scroll
 +
                // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
 +
                $('html, body').animate({
 +
                    scrollTop: $(hash).offset().top
 +
                }, 800, function () {
  
        <h3 style="font-family:'Righteous'; color:#2ecc71;">The Problem</h3>
+
                    // Add hash (#) to URL when done scrolling (default click behavior)
        <div class="row">
+
                     window.location.hash = hash;
            <div class="col-12">
+
                });
                <p>
+
            } // End if
                    Antimicrobial resistance is on the rise and the death toll from bacterial infections will continue
+
        });
                    to increase if no alternative solutions are developed. The threat of antimicrobial resistance has
+
    });
                     been known for a long time - Alexander Fleming, the discoverer of penicillin, predicted in 1945 that
+
                    “exposing […] microbes to nonlethal quantities of the drug makes them resistant”. Even though
+
                    efforts for development of novel antimicrobial compounds have been stepped up in recent years, there
+
                    is still a lack of safe and effective substitutes for antibiotics<sup><a href="#glpreferences">1</a></sup>.
+
                    A promising alternative – phage therapy – has an extensive history of successful application in
+
                    countries with limited access to antibiotics. Although phage therapy has been known for almost a
+
                    century, widespread application of phage therapy still has to become reality.<sup><a
+
                        href="#glpreferences">2</a></sup> This was the overarching problem our project needed to tackle.
+
  
 +
 +
    $(document).ready(function () {
 +
        $(".reg").click(function () {
 +
            $(".pop").fadeOut(100);
 +
            $(this).next().fadeIn(300);
 +
        });
 +
 +
        $(".pop > span, .pop").click(function () {
 +
            $(".pop").fadeOut(300);
 +
        });
 +
    });
 +
 +
</script>
 +
 +
<div id="videoBox" class="text-center" style="position: relative;  min-height:5%; width:100%; margin-top: 50px">
 +
    <video id="videoShow" playsinline autoplay muted id="myVideo" style="min-height:5%; width:100%; margin-top: 50px">
 +
        <source src="https://2019.igem.org/wiki/images/a/a0/T--Tuebingen--MovieLast-mov.mov" type="video/mp4"
 +
                style="width: 100%;">
 +
        Your browser does not support HTML5 video.
 +
    </video>
 +
 +
</div>
 +
 +
 +
<div id="whyTitle" class="container-fluid jumbotron jumbotron-fluid text-center mb-0 p-0 align-items-center text-light"
 +
    style="overflow-x: hidden; overflow-y: hidden;">
 +
    <div data-aos="zoom-out-left"
 +
        data-aos-offset="200"
 +
        data-aos-delay="50"
 +
        data-aos-duration="2000"
 +
        data-aos-easing="ease-in-out-cubic"
 +
        data-aos-mirror="true"
 +
        data-aos-once="false">
 +
        <div class="row pt-5 pb-3 ">
 +
            <div class="warningContent col-12">
 +
                <span class="align-middle" style="font-family: 'Righteous';color:#2ecc71;font-size: 2.7rem !important;">GLP.exe - a safe and effective treatment for Type 2 Diabetes Mellitus</span>
 +
            </div>
 +
        </div>
 +
 +
        <div class="row p-5" style="padding-left: 10vw; padding-right: 10vw;">
 +
            <div class="col-12 col-md-6">
 +
                <img class="img-fluid"
 +
                    src="https://2019.igem.org/wiki/images/3/3c/T--Tuebingen--Diabetes-Treatment-transparent-Landing-Page.png"
 +
                    alt="meetUp" style="padding-left: 6vw;">
 +
            </div>
 +
            <div class="col-12 col-md-6 pt-3" style="padding-right: 6vw;">
 +
                <p class="text-justify  mobileText">Several treatment options for Type 2 Diabetes Mellitus
 +
                    have been developed in recent years significantly improving the patients' insulin level.
 
                 </p>
 
                 </p>
                <p>
+
 
                    In order to design an impactful project for this year’s iGEM season, we deemed it important to
+
                 <p class="text-justify  mobileText">
                    precisely understand and define the problem we wanted to work on.
+
                     Hence, the diagnosis of Type 2 Diabetes Mellitus is no longer a death sentence.
                </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 style="font-family:'Righteous'; color:#2ecc71;">The Solution: Phactory</h3>
+
        </div>
            <div class="row">
+
    </div>
                <div class="col-12">
+
                    <p>
+
                        We contemplated ways to use synthetic biology to overcome these challenges and found that using
+
                        cell extract as the central component of a manufacturing pipeline for phages might allow us to
+
                        overcome these issues. With the central piece of our project in place, we were able to define
+
                        the individual modules of our manufacturing pipeline. The modular approach allowed us to break
+
                        down the overall problem into several isolated, solvable sub-problems that could be worked on in
+
                        parallel. For each module we defined the requirements we wanted to fulfill and brainstormed
+
                        potential solutions for reaching these requirements. The individual modules were designed in
+
                        such a way that they are truly independent of one another and that issues in one module would
+
                        not impede progress in another module. We defined quantitative criteria to measure progress in
+
                        achieving the identified requirements during the build-test cycle. To maximize our chances of
+
                        success and the robustness of our designs, we chose the simplest solutions we could come up
+
                        with. We defined additional goals when multiple solutions fulfilling these criteria were
+
                        available: accessibility, portability, affordability, and safety.
+
                    </p>
+
  
                    <p>
+
    <div class="row pt-5 pb-3 ">
                        Phactory was designed to be an accessible manufacturing pipeline that produces pure, precisely
+
        <div class="warningContent col-12 slide-in">
                        defined bacteriophages at medically relevant concentrations using highly portable, affordable
+
            <span class="align-middle" style="font-family: 'Righteous';color:#2ecc71; font-size: 3rem !important;">Yet...</span>
                        and modular components. </p>
+
        </div>
                    <!-- comm: <p> -->
+
    </div>
                 </div>
+
 
 +
    <div data-aos="zoom-out-right"
 +
        data-aos-offset="200"
 +
        data-aos-delay="50"
 +
        data-aos-duration="2000"
 +
        data-aos-easing="ease-in-out-cubic"
 +
        data-aos-mirror="true"
 +
        data-aos-once="false">
 +
        <div class="row p-5" style="padding-left: 10vw; padding-right: 10vw;">
 +
            <div class="col-12 col-md-6">
 +
                 <img class="img-fluid"
 +
                    src="https://2019.igem.org/wiki/images/1/15/T--Tuebingen--Injection-Scheme-transparent-Landing-Page.png"
 +
                    alt="meetUp" style="padding-left: 6vw;">
 
             </div>
 
             </div>
  
             <h2 style="font-family:'Righteous';">Preparation of Cell Extract</h2>
+
             <div class="col-12 col-md-6 pt-3" style="padding-right: 6vw;">
            <div class="row">
+
                <h2 class="display-4 mobileTitle" style="font-family: 'Righteous';color:#2ecc71;">Current Drugs</h2>
                <div class="col-12">
+
                <p class="text-justify mobileText">are expensive, require fine tuning and daily shots.
                    <p>
+
                     Moreover, they have severe side-effects, causing patients to skip doses.</p>
                        Commercially available cell extract is highly expensive, while home-made alternatives are
+
                        time-consuming to produce and lack reliability. Furthermore, the presence of DNases in cell
+
                        extract complicates the production of phages from linear genomes. This module therefore had two
+
                        separate goals:
+
                    </p>
+
                    <p>
+
                        The first goal was to produce high-quality, affordable cell extract and to establish quality
+
                        control mechanisms to quantify its performance. The preparation protocols described in previous
+
                        publications were analysed to identify optimization goals. <sup><a
+
                            href="#glpreferences">3</a></sup> To achieve these goals every step of the preparation
+
                        process was assessed and improved, with a particular focus on cell cultivation and cell lysis.
+
                        To enable easy distribution and storage, we decided to improve the overall durability and
+
                        storage time of our cell extract by lyophilization. After resuspension of the dried cell
+
                        extract, assembly of any given bacteriophage can be performed.
+
                     </p>
+
                    <p>
+
                        The second goal was to optimize cell extract for the expression from linear DNA. To accomplish
+
                        that, we identified the intracellular DNAse RecBCD as our main target. This enzyme - in
+
                        cooperation with RecA - is an essential component maintaining the integrity of the bacterial
+
                        genome<sup><a href="#glpreferences">4</a></sup>. Furthermore it is the protein causing
+
                        degradation of linear DNA within cell extract. Therefore, the inactivation of this endonuclease
+
                        was defined as a crucial step to ensure efficient phage production within the cell extract.
+
                    </p>
+
  
                 </div>
+
                <p class="text-justify mobileText">“Many patients don’t want to use insulin. They don’t want
 +
                    to do finger sticks and they’re afraid of hypoglycemia.”<br>
 +
                 </p>
 +
 
 +
                <p class="text-justify mobileText">
 +
                    “To fight the global diabetes pandemic, we would ideally have an accessible cost-effective
 +
                    easily-compliant intervention that has high clinical efficacy and that is free of adverse side
 +
                    effects.”<br><br>
 +
                    Prof. Harold Lebovitz, State University of New York Health Science Center, Brooklyn, New York
 +
                </p>
 
             </div>
 
             </div>
 +
        </div>
 +
    </div>
  
 +
    <div class="row pt-5 pb-3 ">
 +
        <div class="warningContent col-12">
 +
            <span class="align-middle" style="font-family: 'Righteous';color:#2ecc71;font-size: 3rem !important;">However...</span>
 +
        </div>
 +
    </div>
  
            <h2 style="font-family:'Righteous';">Synthetic Phage Manufacturing</h2>
+
    <div data-aos="zoom-out-left"
            <div class="row">
+
        data-aos-offset="200"
                <div class="col-12">
+
        data-aos-delay="50"
                    <p>
+
        data-aos-duration="2000"
                        Our goal was to use cell extract as a host-independent platform for phage assembly from a linear
+
        data-aos-easing="ease-in-out-cubic"
                        DNA template. To demonstrate the universal applicability of our manufacturing platform, we
+
        data-aos-mirror="true"
                        attempted to express a variety of structurally different phages at titers suitable for
+
        data-aos-once="false">
                        therapeutic application. In order to generate maximal phage titers, we identified the parameters
+
 
                        that potentially impact phage production. These included incubation time, influence of dNTP
+
        <div class="row p-5" style="padding-left: 10vw; padding-right: 10vw;">
                        addition and optimal DNA template concentration.
+
            <div class="col-12 col-md-6">
                    </p>
+
                <img class="img-fluid"
                </div>
+
                    src="https://2019.igem.org/wiki/images/e/e3/T--Tuebingen--Our-Probiotic-transparent-Landing-page.png"
 +
                    alt="meetUp" style="padding-left: 6vw;">
 
             </div>
 
             </div>
  
             <h2 style="font-family:'Righteous';">Modular Phage Composition</h2>
+
             <div class="col-12 col-md-6 pt-3" style="padding-right: 6vw;">
            <div class="row">
+
                <h2 class="display-4 mobileTitle" style="font-family: 'Righteous';color:#2ecc71;">There's a
                 <div class="col-12">
+
                    solution!</h2>
                     <p>
+
                 <p class="text-justify mobileText">Our therapeutic agent is a probiotic secreting incretin
                        When thinking about a release into the environment in the course of a therapeutic application,
+
                     mimetics placed in the patients intestine by oral administration of capsules. GLP-1 and Exendin-4,
                        it is important to avoid using genetically engineered phages. We postulated that in our cell
+
                    our
                        free system it should be possible to modify phages without altering their genome. In a modular
+
                    main actors, cause an increase in insulin secretion, if the cell has already taken up sugar.</p>
                        approach, we aimed at adding both natural phage DNA and engineered proteins to an assembly
+
 
                        reaction. To test our hypothesis, we chose to externally express an edited HOC (highly
+
                <p class="text-justify mobileText">This enables an easier therapy where a regular intake of
                        immunogenic outer capsid) protein and incorporate it in the assembly reaction. Thinking about
+
                    medicals is not required.</p>
                        the possible applications of fluorescent and bioluminescent phages in medical imaging, we
+
 
                        designed expression constructs encoding for YFP or the NanoLuc luciferase. Additionally, we
+
                <p class="text-justify mobileText">Improved cell penetrating peptides with the use of
                        needed to consider first the isolation of the desired protein and then later the purification of
+
                    artificial intelligence allow for an efficient and safe transport of our effectors into the
                        the phages out of a heterogeneous solution. Therefore, we added a histidine-tag.
+
                     cells.</p>
                     </p>
+
                </div>
+
 
             </div>
 
             </div>
 +
        </div>
 +
    </div>
  
             <h2 style="font-family:'Righteous'; color:#2ecc71;">Quality Control</h2>
+
    <div class="row pt-5 pb-3 ">
 +
        <div class="warningContent col-12">
 +
             <span class="align-middle"
 +
                  style="font-family: 'Righteous';color:#2ecc71;font-size: 3rem !important;">Safety</span>
 +
        </div>
 +
    </div>
  
 +
    <div data-aos="zoom-out-right"
 +
        data-aos-offset="200"
 +
        data-aos-delay="50"
 +
        data-aos-duration="2000"
 +
        data-aos-easing="ease-in-out-cubic"
 +
        data-aos-mirror="true"
 +
        data-aos-once="false">
  
            <div class="row">
+
        <div class="row p-5" style="padding-left: 10vw; padding-right: 10vw;">
                <div class="col-12">
+
            <div class="col-12 col-md-6">
                    <p>
+
                <img class="img-fluid"
                        Clinical applications require highly pure samples of functional bacteriophages, free of
+
                    src="https://2019.igem.org/wiki/images/6/6d/T--Tuebingen--Cas3-system-transparent-Landing-page.png"
                        bacterial endotoxins and contaminations. The purpose of this module is to implement quality
+
                    alt="meetUp" style="padding-left: 6vw;">
                        control mechanisms to ensure a safe and effective application.
+
                    </p>
+
                </div>
+
 
             </div>
 
             </div>
  
             <div class="row">
+
             <div class="col-12 col-md-6 pt-3" style="padding-right: 6vw;">
                <div class="col-12">
+
                 <h2 class="display-4 mobileTitle" style="font-family: 'Righteous';color:#2ecc71;">is our highest
                    <figure class="figure" id="image-popups">
+
                    priority!</h2>
                        <a style="font-size: small"
+
                <p class="text-justify mobileText">Therefore, we developed a novel, Cas3 based kill-switch
                          href="http://2018.igem.org/wiki/images/6/69/T--Munich--Design_Principles.png"
+
                    mechanism. The flexible system uses three regulators inspired by the human intestines: temperature,
                          data-effect="mfp-zoom-out"
+
                    availability of fatty acids in form of Acyl CoA and N-Acetyl-Glucosamin. </p>
                          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.">
+
                <p class="text-justify mobileText">
                            <img src="http://2018.igem.org/wiki/images/6/69/T--Munich--Design_Principles.png"
+
                    If the conditions of our regulatory system are no longer met, Cas3 will be degrading all genetic
                                class="figure-img img-fluid rounded"
+
                    information.
                                alt="A generic square placeholder image with rounded corners in a figure."></a>
+
                </p>
                    </figure>
+
                 </div>
+
            </div>
+
            <div class="row">
+
                <div class="col-12">
+
                    <h3 style="font-family:'Righteous'; color:#2ecc71;">Quantifying the Level of DNA Contamination</h3>
+
                    <p>
+
                        While gels and absorption can be used to detect the presence of the desired phage genomes, they
+
                        do not prove the absence of contaminating DNA. In fact, we found that more than 50% of isolated
+
                        phage genome purified from common <i>E. coli</i> phages using traditional protocols is instead
+
                        <i>E. coli</i> genomic DNA. To precisely quantify the amount of contamination, we used third
+
                        generation sequencing. Nanopore sequencing was chosen because of its affordability and small
+
                        size that makes the device highly portable. Its long-read lengths allows for unambiguous
+
                        identification of the source of contaminations.
+
                    </p>
+
                    <p>
+
                        As a submodule, we decided to construct a software suite called Sequ-Into that allows the user
+
                        to easily determine the amount of DNA contamination in the first few minutes of sequencing,
+
                        thereby providing access to this aspect of phage manufacturing without requiring specialized
+
                        knowledge in bioinformatics.
+
                    </p>
+
                </div>
+
 
             </div>
 
             </div>
 +
        </div>
 +
    </div>
  
 +
    <div class="row pt-5 pb-3 ">
 +
        <div class="warningContent col-12">
 +
            <span class="align-middle" style="font-family: 'Righteous';color:#2ecc71;font-size: 3rem !important;">Additionally</span>
 +
        </div>
 +
    </div>
  
            <div class="row">
+
    <div data-aos="zoom-out-left"
                <div class="col-12">
+
        data-aos-offset="200"
                    <p>
+
        data-aos-delay="50"
                        3D printed low-cost devices to overcome these challenges independently. The hardware was
+
        data-aos-duration="2000"
                        designed to be compatible with existing laboratory equipment or open source solutions.
+
        data-aos-easing="ease-in-out-cubic"
                    </p>
+
        data-aos-mirror="true"
                </div>
+
        data-aos-once="false">
 +
 
 +
        <div class="row p-5" style="padding-left: 10vw; padding-right: 10vw;">
 +
            <div class="col-12 col-md-6">
 +
                <img class="img-fluid"
 +
                    src="https://2019.igem.org/wiki/images/a/a6/T--Tuebingen--EcN-Charakterisierung-transparent-Landing-page.png"
 +
                    alt="meetUp" style="padding-left: 6vw;">
 
             </div>
 
             </div>
            <div class="row">
 
                <div class="col-12">
 
                    <h3 style="font-family:'Righteous';">Verifying the Function of the Phage Product</h3>
 
  
                    <p>
+
            <div class="col-12 col-md-6 pt-3" style="padding-right: 6vw;">
                        To assess the antimicrobial action of our phage product, we combined two methods. We chose a
+
                <h2 class="display-4 mobileTitle" style="overflow-x: visible; font-family: 'Righteous';color:#2ecc71;">
                        plaque assay as a cheap and simple way to confirm the presence of functional phages and to
+
                    An in depth <i>E. coli</i> Nissle characterization</h2>
                        quantify the phage titer. Reproduction and transcriptional capability of our phages however
+
                <p class="text-justify mobileText">Despite the fact that <i>E. coli</i> Nissle is an already
                        could be assessed by reverse transcriptase qPCR.
+
                    approved probiotic, it's surprisingly badly characterized.</p>
                    </p>
+
                    <h3 style="font-family:'Righteous';">Reducing Toxin Levels</h3>
+
  
                    <p>
+
                <p class="text-justify mobileText">
                        In an attempt to push our purity towards enabling intravenous administration, we decided to
+
                    Hence, we provide the first metabolic model of <i>E. coli</i> Nissle and optimize it's growth for various
                        perform fractionation in a pressure-driven size-exclusion filter system. Suitability of the
+
                     growth media. Furthermore, we predicted the interaction and competition of <i>E. coli</i> Nissle with
                        phage product for intravenous application could then be assessed with an additional endotoxin
+
                    common competitors for various fluxes in the gut.
                        test.
+
                </p>
                    </p>
+
                     <p>
+
                        After these steps, our phages would be ready for animal testing, which we did not plan to
+
                        attempt in the context of the iGEM competition
+
                    </p>
+
  
                 </div>
+
                <p class="text-justify mobileText">
 +
                    Finally, we carried out a series of RNA-Seq experiments to assess the adaptions and reactions of E.
 +
                    coli
 +
                    Nissle to aerobic, as well as anaerobic occurring stress factors.
 +
                 </p>
 
             </div>
 
             </div>
            <div 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">
+
  <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>
  
     <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
+
     <div class="row pt-5 pb-3 ">
      <div class="card-body">
+
        <div class="warningContent col-12 slide-in">
          <div class="row">
+
            <span class="align-middle" style="font-family: 'Righteous';color:#2ecc71;font-size: 3rem !important;">Bringing it all together</span>
          <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>
          <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 data-aos="zoom-out-right"
 +
        data-aos-offset="200"
 +
        data-aos-delay="50"
 +
        data-aos-duration="2000"
 +
        data-aos-easing="ease-in-out-cubic"
 +
        data-aos-mirror="true"
 +
        data-aos-once="false">
 +
 
 +
        <div class="row p-5" style="padding-left: 10vw; padding-right: 10vw;">
 +
            <div class="col-12 col-md-6">
 +
                <img class="img-fluid"
 +
                    src="https://2019.igem.org/wiki/images/3/3d/T--Tuebingen--New-Approach-transparent-Landing-page.png"
 +
                    alt="meetUp" style="padding-left: 6vw;">
 
             </div>
 
             </div>
  
  
             <h2 style="font-family:'Righteous';">Encapsulation</h2>
+
             <div class="col-12 col-md-6 pt-3" style="padding-right: 6vw;">
            <div class="row">
+
                 <h2 class="display-4 mobileTitle">Our work lays the foundation for an innovative, unprecedented approach
                 <div class="col-12">
+
                    to treat Type 2 Diabetes Mellitus.</h2>
                    <The goal of this module is to optimize the packaging of assembled phages to prepare them for
+
                        application to patients.>
+
                        <p>
+
                            The transport within the body often poses problems for the activity and integrity of phages,
+
                            which can be addressed by packaging of the phages in a protective layer<sup><a
+
                                href="#phareferences">5</a></sup>. For oral application of our phage product, sufficient
+
                            stability for gastric passage has to be guaranteed. The highly acidic environment, as well
+
                            as the presence of proteases composed the major challenges. Our packaging method thus needed
+
                            to provide resistance to low pH. At the same time, phages needed to be released from their
+
                            protection upon reaching intestinal fluid. These characteristics are provided by
+
                            calcium-alginate microspheres<sup><a
+
                                href=https://www.ncbi.nlm.nih.gov/pmc/articles/PMC5264180/>6</a></sup>. Lacking suitable
+
                            encapsulation hardware, we decided to build our own nozzle to encapsulate the phages in
+
                            monodisperse microcapsules.
+
                        </p>
+
                        <p>
+
                            The methods most suitable for quantification of size and assessment of monodispersity of the
+
                            alginate capsules were brightfield and epifluorescence microscopy. To determine whether our
+
                            encapsulation method fulfills our requirements of survival and release of phages in
+
                            simulated gastric and intestinal fluid, respectively, we subsequently performed plaque
+
                            assays.
+
                        </p>
+
                    </The>
+
                </div>
+
 
             </div>
 
             </div>
 +
        </div>
 +
    </div>
  
 +
</div>
  
 +
<style>
  
 +
    .testclasse {
 +
        margin: 0;
 +
        background-color: #2ecc71;
 +
        background-image: radial-gradient(#2ecc71 20%, #1b7a43 50%, rgba(0, 0, 0, 0.5) 100%);
 +
        background-size: 120%;
 +
        background-position: center;
 +
        font-family: "Barlow Condensed", sans-serif;
 +
        -webkit-animation: tighten-vinette ease-out 1800ms forwards;
 +
        animation: tighten-vinette ease-out 1800ms forwards;
 +
    }
  
 +
    .babbelbubu .logo .kokosnusss {
 +
        width: 120%;
 +
        margin-left: -10%;
 +
        margin-top: -45%;
 +
        pointer-events: none;
 +
        height: 90vh;
 +
        top: 0;
 +
        bottom: 0;
 +
        right: 0;
 +
        left: 0;
 +
        position: relative;
 +
        opacity: .6;
 +
        z-index: 20;
 +
        background-size: cover;
 +
        background-position: center;
 +
        background-image: url("https://2019.igem.org/wiki/images/2/2a/T--Tuebingen--white_logo_animated.gif");
 +
    }
  
            <div id="glpreferences" class="row">
+
    .babbelbubu {
                <h3 style="font-family:'Righteous'; color: #2ecc71;">References</h3>
+
        height: 80%;
                <div class="col-12" style="color: #F4F0DE;">
+
        display: flex;
                    <ol style="color: #F4F0DE;">
+
        align-items: center;
                        <li><a href=https://www.nature.com/articles/ja2017124> Incentivising innovation in antibiotic
+
        justify-content: center;
                            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>
+
    .logo {
                        <li id="ref_3"><a
+
        cursor: pointer;
                                href=https://www.jove.com/video/50762/protocols-for-implementing-an-escherichia-coli-based-tx-tl-cell-free>
+
        text-align: center;
                            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
+
    .logo:hover .restart {
                            the Repair of Double-Stranded DNA Breaks.</a></li>
+
        opacity: .8;
                        <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., …
+
    .restart {
                            Kirpichnikova, A. (2017). Formulation, stabilisation and encapsulation of bacteriophage for
+
        color: #fff;
                            phage therapy. Advances in Colloid and Interface Science, 249, 100–133. </a></li>
+
        margin-top: 20px;
                        <li id="ref_6"><a href=hhttps://www.ncbi.nlm.nih.gov/pmc/articles/PMC5264180/>Colom, J.,
+
        font-size: 1.5rem;
                            Cano-Sarabia, M., Otero, J., Aríñez-Soriano, J., Cortés, P., Maspoch, D., &amp; Llagostera,
+
        text-transform: uppercase;
                            M. (2017). Microencapsulation with alginate/CaCO3: A strategy for improved phage therapy.
+
        letter-spacing: -.08rem;
                            Scientific Reports, 7, 41441. </a></li>
+
        transition: opacity 150ms linear;
                        </li>
+
    }
                    </ol>
+
 
                </div>
+
    .marvel, .studios {
             </div>
+
        position: relative;
 +
        color: #fff;
 +
        text-transform: uppercase;
 +
        letter-spacing: -.2rem;
 +
        font-size: 5rem;
 +
        margin: .05rem .05rem .5rem;
 +
        padding: 0 0.4rem;
 +
        display: inline-block;
 +
        margin-top: 30%;
 +
    }
 +
 
 +
    .studios {
 +
        font-weight: 500;
 +
        letter-spacing: -.3rem;
 +
        -webkit-transform: translateX(-95px);
 +
        transform: translateX(-95px);
 +
    }
 +
 
 +
    .marvel {
 +
        z-index: 10;
 +
        font-weight: 800;
 +
        -webkit-transform: translateX(95px);
 +
        transform: translateX(95px);
 +
    }
 +
 
 +
    .marvel:before {
 +
        z-index: -10;
 +
        content: '';
 +
        display: block;
 +
        background-color: #2ecc71;
 +
        border: solid rgba(255, 255, 255, 0.2) 1px;
 +
        height: 100%;
 +
        width: 100%;
 +
        position: absolute;
 +
        top: 0;
 +
        left: 0;
 +
    }
 +
 
 +
    .studios:after, .studios:before {
 +
        content: '';
 +
        display: block;
 +
        height: 3px;
 +
        position: absolute;
 +
        background-color: #fff;
 +
        display: block;
 +
        left: 0.4rem;
 +
        right: 0.4rem;
 +
    }
 +
 
 +
    .studios:before {
 +
        top: 0;
 +
    }
 +
 
 +
    .studios:after {
 +
        bottom: 0;
 +
    }
 +
 
 +
    @media screen and (max-width: 900px) and (max-height: 1170px) {
 +
        .babbelbubu .logo .kokosnusss {
 +
            margin-top: -90%;
 +
            width: 100%;
 +
            margin-left: 0;
 +
        }
 +
    }
 +
 
 +
    @media screen and (max-width: 500px) and (max-height: 750px) {
 +
        .babbelbubu .logo .kokosnusss {
 +
            margin-top: -120%;
 +
            width: 100%;
 +
            margin-left: 0;
 +
        }
 +
 
 +
        .marvel, .studios {
 +
            font-size: 3rem;
 +
        }
 +
    }
 +
 
 +
    @media screen and (max-width: 420px) and (max-height: 850px) {
 +
        .babbelbubu .logo .kokosnusss {
 +
            margin-top: -140%;
 +
            width: 100%;
 +
            margin-left: 0;
 +
        }
 +
 
 +
        .marvel, .studios {
 +
            font-size: 3rem;
 +
        }
 +
    }
 +
 
 +
    .wrapper.run-animation .restart {
 +
        opacity: 0;
 +
        -webkit-animation: fade-down 1200ms ease 3600ms forwards;
 +
        animation: fade-down 1200ms ease 3600ms forwards;
 +
    }
 +
 
 +
    .babbelbubu.run-animation {
 +
        -webkit-animation: shrink ease-out 4800ms forwards 600ms;
 +
        animation: shrink ease-out 4800ms forwards 600ms;
 +
    }
 +
 
 +
    .babbelbubu.run-animation .marvel {
 +
        -webkit-transform: translateX(95px);
 +
        transform: translateX(95px);
 +
        -webkit-animation: slide-out-X 750ms ease forwards;
 +
        animation: slide-out-X 750ms ease forwards;
 +
    }
 +
 
 +
    .babbelbubu.run-animation .studios {
 +
        -webkit-transform: translateX(-95px);
 +
        transform: translateX(-95px);
 +
        color: transparent;
 +
        -webkit-animation: slide-out-X 750ms ease forwards, show-text 300ms linear forwards 1500ms;
 +
        animation: slide-out-X 750ms ease forwards, show-text 300ms linear forwards 1500ms;
 +
    }
 +
 
 +
    .babbelbubu.run-animation .studios:before {
 +
        -webkit-transform: translateY(2.9rem);
 +
        transform: translateY(2.9rem);
 +
        -webkit-animation: slide-out-Y 300ms ease forwards 750ms;
 +
        animation: slide-out-Y 300ms ease forwards 750ms;
 +
    }
 +
 
 +
    .babbelbubu.run-animation .studios:after {
 +
        -webkit-transform: translateY(-2.9rem);
 +
        transform: translateY(-2.9rem);
 +
        -webkit-animation: slide-out-Y 300ms ease forwards 750ms;
 +
        animation: slide-out-Y 300ms ease forwards 750ms;
 +
    }
 +
 
 +
    .babbelbubu.run-animation .logo .kokosnusss {
 +
        -webkit-animation: flicker-images 1500ms 2 steps(1, end), fade-out 4500ms forwards;
 +
        animation: flicker-images 1500ms 2 steps(1, end), fade-out 4500ms forwards;
 +
    }
 +
 
 +
    @-webkit-keyframes slide-out-X {
 +
        100% {
 +
            -webkit-transform: translateX(0);
 +
            transform: translateX(0);
 +
        }
 +
    }
 +
 
 +
    @keyframes slide-out-X {
 +
        100% {
 +
            -webkit-transform: translateX(0);
 +
            transform: translateX(0);
 +
        }
 +
    }
 +
 
 +
    @-webkit-keyframes slide-out-Y {
 +
        100% {
 +
            -webkit-transform: translateY(0);
 +
            transform: translateY(0);
 +
        }
 +
    }
 +
 
 +
    @keyframes slide-out-Y {
 +
        100% {
 +
            -webkit-transform: translateY(0);
 +
            transform: translateY(0);
 +
        }
 +
    }
 +
 
 +
    @-webkit-keyframes show-text {
 +
        100% {
 +
            color: #fff;
 +
        }
 +
    }
 +
 
 +
    @keyframes show-text {
 +
        100% {
 +
            color: #fff;
 +
        }
 +
    }
 +
 
 +
    @-webkit-keyframes shrink {
 +
        100% {
 +
            -webkit-transform: scale(0.8);
 +
            transform: scale(0.8);
 +
        }
 +
    }
 +
 
 +
    @keyframes shrink {
 +
        100% {
 +
            -webkit-transform: scale(0.8);
 +
            transform: scale(0.8);
 +
        }
 +
    }
 +
 
 +
    @-webkit-keyframes tighten-vinette {
 +
        100% {
 +
            background-size: 120%;
 +
        }
 +
    }
 +
 
 +
    @keyframes tighten-vinette {
 +
        100% {
 +
            background-size: 120%;
 +
        }
 +
    }
 +
 
 +
    @-webkit-keyframes fade-down {
 +
        0% {
 +
            -webkit-transform: translateY(-2rem);
 +
            transform: translateY(-2rem);
 +
            opacity: 0;
 +
        }
 +
        100% {
 +
            -webkit-transform: translateY(0);
 +
            transform: translateY(0);
 +
            opacity: .5;
 +
        }
 +
    }
 +
 
 +
    @keyframes fade-down {
 +
        0% {
 +
            -webkit-transform: translateY(-2rem);
 +
            transform: translateY(-2rem);
 +
            opacity: 0;
 +
        }
 +
        100% {
 +
            -webkit-transform: translateY(0);
 +
            transform: translateY(0);
 +
            opacity: .5;
 +
        }
 +
    }
 +
 
 +
    @-webkit-keyframes fade-out {
 +
        100% {
 +
            opacity: 0;
 +
        }
 +
    }
 +
 
 +
    @keyframes fade-out {
 +
        100% {
 +
            opacity: 0;
 +
        }
 +
    }
 +
 
 +
    @-webkit-keyframes flicker-images {
 +
        0% {
 +
            background-image: url("https://2019.igem.org/wiki/images/0/0c/T--Tuebingen--ScienceSlam.png");
 +
        }
 +
        10% {
 +
            background-image: url("https://2019.igem.org/wiki/images/d/d1/T--Tuebingen--teammeeting.jpeg");
 +
        }
 +
        20% {
 +
            background-image: url("https://2019.igem.org/wiki/images/4/45/T--Tuebingen--lab.jpeg");
 +
        }
 +
        30% {
 +
            background-image: url("https://2019.igem.org/wiki/images/e/e0/T--Tuebingen--fotoshoot.jpeg");
 +
        }
 +
        40% {
 +
            background-image: url("https://2019.igem.org/wiki/images/b/bf/T--Tuebingen--stand.jpeg");
 +
        }
 +
        50% {
 +
            background-image: url("https://2019.igem.org/wiki/images/6/66/T--Tuebingen--springfest.jpeg");
 +
        }
 +
        60% {
 +
            background-image: url("https://2019.igem.org/wiki/images/e/ed/T--Tuebingen--lauf.jpeg");
 +
        }
 +
        70% {
 +
            background-image: url("https://2019.igem.org/wiki/images/9/97/T--Tuebingen--springedding.jpeg");
 +
        }
 +
        80% {
 +
            background-image: url("https://2019.igem.org/wiki/images/e/ed/T--Tuebingen--mettup.jpeg");
 +
        }
 +
        90% {
 +
            background-image: url("https://2019.igem.org/wiki/images/a/ac/T--Tuebingen--labwork.jpeg");
 +
        }
 +
        100% {
 +
            background-image: url("https://2019.igem.org/wiki/images/5/56/T--Tuebingen--2.jpeg");
 +
        }
 +
    }
 +
 
 +
    @keyframes flicker-images {
 +
        0% {
 +
            background-image: url("https://2019.igem.org/wiki/images/0/0c/T--Tuebingen--ScienceSlam.png");
 +
        }
 +
        10% {
 +
            background-image: url("https://2019.igem.org/wiki/images/d/d1/T--Tuebingen--teammeeting.jpeg");
 +
        }
 +
        20% {
 +
            background-image: url("https://2019.igem.org/wiki/images/4/45/T--Tuebingen--lab.jpeg");
 +
        }
 +
        30% {
 +
            background-image: url("https://2019.igem.org/wiki/images/e/e0/T--Tuebingen--fotoshoot.jpeg");
 +
        }
 +
        40% {
 +
            background-image: url("https://2019.igem.org/wiki/images/b/bf/T--Tuebingen--stand.jpeg");
 +
        }
 +
        50% {
 +
            background-image: url("https://2019.igem.org/wiki/images/6/66/T--Tuebingen--springfest.jpeg");
 +
        }
 +
        60% {
 +
            background-image: url("https://2019.igem.org/wiki/images/e/ed/T--Tuebingen--lauf.jpeg");
 +
        }
 +
        70% {
 +
            background-image: url("https://2019.igem.org/wiki/images/9/97/T--Tuebingen--springedding.jpeg");
 +
        }
 +
        80% {
 +
            background-image: url("https://2019.igem.org/wiki/images/e/ed/T--Tuebingen--mettup.jpeg");
 +
        }
 +
        90% {
 +
            background-image: url("https://2019.igem.org/wiki/images/a/ac/T--Tuebingen--labwork.jpeg");
 +
        }
 +
        100% {
 +
            background-image: url("https://2019.igem.org/wiki/images/5/56/T--Tuebingen--2.jpeg");
 +
        }
 +
    }
 +
 
 +
</style>
 +
 
 +
 
 +
<div class="testclasse">
 +
 
 +
    <div class="babbelbubu run-animation" id="ananananananas">
 +
        <div class="logo">
 +
 
 +
            <span class="marvel"> <a href="https://2019.igem.org/Team:Tuebingen/Story"
 +
                                    style="color: #fff;text-decoration: none;">View our</a></span>
 +
            <span class="studios"> <a href="https://2019.igem.org/Team:Tuebingen/Story" style="color: #fff;text-decoration: none;">Story</a></span>
 +
 
 +
            <div class="restart">Restart</div>
 +
 
 +
             <div class="kokosnusss"></div>
 
         </div>
 
         </div>
    </main>
 
</div>
 
</div>
 
  
 +
    </div>
 +
 +
 +
</div>
  
<script src="https://2019.igem.org/Team:Tuebingen/sidebarJS?action=raw&ctype=text/javascript"></script>
 
  
<script src="https://2019.igem.org/Team:Tuebingen/smoothScrollJS?action=raw&ctype=text/javascript"></script>
 
 
<script>
 
<script>
var scroll = new SmoothScroll('a[href*="#"]');
+
    element = document.getElementById("ananananananas");
 +
 
 +
    if (element) {
 +
        // reset the transition by...
 +
        element.addEventListener("mouseenter", function (e) {
 +
            e.preventDefault;
 +
 
 +
            console.log('element', element.classList);
 +
 
 +
            // removing the class
 +
            element.classList.remove("run-animation");
 +
 
 +
            // triggering reflow
 +
            void element.offsetWidth;
 +
 
 +
            // and re-adding the class
 +
            element.classList.add("run-animation");
 +
        }, false);
 +
 
 +
        element.addEventListener("click", function (e) {
 +
            e.preventDefault;
 +
 
 +
            console.log('element', element.classList);
 +
 
 +
            // removing the class
 +
            element.classList.remove("run-animation");
 +
 
 +
            // triggering reflow
 +
            void element.offsetWidth;
 +
 
 +
            // and re-adding the class
 +
            element.classList.add("run-animation");
 +
        }, false);
 +
    }
 
</script>
 
</script>
  
        <div class='container-fluid p-3' style="background-color: #919191;">
+
<div class='container-fluid p-3' style="background-color: #919191;">
                <hr>
+
        <hr>
                <div class='row align-items-center'>
+
        <div class='row align-items-center'>
                    <div class='col-6 col-md-2 sponsorLogo text-center'>
+
            <div class='col-6 col-md-2 sponsorLogo text-center'>
                        <a href="https://www.stura-tuebingen.de/" target="_blank2"><img class="img-fluid"
+
                <a href="https://www.stura-tuebingen.de/" target="_blank2"><img class="img-fluid"
                                                                                      src="https://2019.igem.org/wiki/images/1/10/T--Tuebingen--stura_logo.png"
+
                                                                                src="https://2019.igem.org/wiki/images/1/10/T--Tuebingen--stura_logo.png"
                                                                                      style="max-height: 80px;"></a>
+
                                                                                style="max-height: 80px;"></a>
                    </div>
+
            </div>
                    <div class='col-6 col-md-2 sponsorLogo text-center'>
+
         
                        <a href="https://www.embl.de/" target="_blank2"><img class="img-fluid"
+
            <div class='col-6 col-md-2 sponsorLogo text-center'>
                                                                            src="https://2019.igem.org/wiki/images/c/c4/T--Tuebingen--embl_logo.png"
+
                <a href="https://www.kohlbacherlab.org" target="_blank2"><img class="img-fluid"
                                                                            style="max-height: 80px;"></a>
+
                                                                              src="https://2019.igem.org/wiki/images/9/99/T--Tuebingen--kohlbacher_logo.png"
                    </div>
+
                                                                              style="max-height: 80px;"></a>
                    <div class='col-6 col-md-2 sponsorLogo text-center'>
+
            </div>
                        <a href="https://www.kohlbacherlab.org" target="_blank2"><img class="img-fluid"
+
            <div class='col-6 col-md-2 sponsorLogo text-center'>
                                                                                      src="https://2019.igem.org/wiki/images/9/99/T--Tuebingen--kohlbacher_logo.png"
+
                <a href="https://www.dieter-schwarz-stiftung.de/homepage.html" target="_blank2"><img class="img-fluid"
                                                                                      style="max-height: 80px;"></a>
+
                                                                                                    src="https://2019.igem.org/wiki/images/8/86/T--Tuebingen--LogoDSS.png"
                    </div>
+
                                                                                                    style="max-height: 80px;"></a>
                    <div class='col-6 col-md-2 sponsorLogo text-center'>
+
            </div>
                        <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"
+
            <div class='col-6 col-md-2 sponsorLogo text-center'>
                                                                                      style="max-height: 80px;"></a>
+
                     <a href="https://www.embl.de/" target="_blank2"><img class="img-fluid"
                      </div>
+
                                                                        src="https://2019.igem.org/wiki/images/c/c4/T--Tuebingen--embl_logo.png"
                    <div class='col-6 col-md-2 sponsorLogo text-center'>
+
                                                                        style="max-height: 80px;"></a>
                        <a href="https://www.experimenta.science/en/" target="_blank2"><img class="img-fluid"
+
                                                                                            src="https://2019.igem.org/wiki/images/e/eb/T--Tuebingen--Logo-Experimenta.png"
+
                                                                                            style="max-height: 80px;"></a>
+
                     </div>
+
                    <div class='col-6 col-md-2 sponsorLogo text-center'>
+
                      <a href="https://www.zmbp.uni-tuebingen.de/zmbp.html" target="_blank2"><img class="img-fluid"
+
                                                                                                src="https://2019.igem.org/wiki/images/d/d8/T--Tuebingen--zmbp_logo.png"
+
                                                                                                style="max-height: 80px;"></a>
+
                    </div>
+
 
                 </div>
 
                 </div>
 +
   
 +
            <div class='col-6 col-md-2 sponsorLogo text-center'>
 +
                <a href="https://www.experimenta.science/en/" target="_blank2"><img class="img-fluid"
 +
                                                                                    src="https://2019.igem.org/wiki/images/e/eb/T--Tuebingen--Logo-Experimenta.png"
 +
                                                                                    style="max-height: 80px;"></a>
 +
            </div>
 
              
 
              
                <hr>
+
                 <div class='col-6 col-md-2 sponsorLogo text-center'>
                 <div class='row align-items-center'>
+
                     <a href="https://www.medizin.uni-tuebingen.de/de/medizinische-fakultaet/forschung/core-facilities/ncct"
                    <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
                      target="_blank2"><img class="img-fluid"
                        <a href="https://www.lexogen.com/" target="_blank2"><img class="img-fluid"
+
                                            src="https://2019.igem.org/wiki/images/e/ec/T--Tuebingen--NCCT.png"
                                                                                src="https://2019.igem.org/wiki/images/4/43/T--Tuebingen--lexogen_logo.png"></a>
+
                                            style="max-height: 80px;"></a>
                    </div>
+
                    <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
                        <a href="http://s466755640.online.de/4bl/" target="_blank2"><img class="img-fluid"
+
                                                                                        src="https://2019.igem.org/wiki/images/0/0b/T--Tuebingen--4base_logo.png"></a>
+
                    </div>
+
                    <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
                        <a href="https://www.agilent.com/" target="_blank2"><img class="img-fluid"
+
                                                                                src="https://2019.igem.org/wiki/images/e/e7/T--Tuebingen--agilent_logo.png"></a>
+
                    </div>
+
                    <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
                        <a href="https://www.digitalocean.com/" target="_blank2"><img class="img-fluid"
+
                                                                                      src="https://2019.igem.org/wiki/images/6/67/T--Tuebingen--digitalocean_logo.png"></a>
+
                    </div>
+
                    <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
                        <a href="https://dwk.com/" target="_blank2"><img class="img-fluid"
+
                                                                        src="https://2019.igem.org/wiki/images/c/ce/T--Tuebingen--dwk_logo.png"></a>
+
                     </div>
+
                    <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
                        <a href="https://www.eppendorf.com/" target="_blank2"><img class="img-fluid"
+
                                                                                  src="https://2019.igem.org/wiki/images/a/a6/T--Tuebingen--eppendorf_logo.png"></a>
+
                    </div>
+
                    <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
                        <a href="https://www.implen.de/" target="_blank2"><img class="img-fluid"
+
                                                                              src="https://2019.igem.org/wiki/images/b/bb/T--Tuebingen--Logo-Implen.png"></a>
+
                    </div>
+
                    <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
                        <a href="https://www.jenabioscience.com/" target="_blank2"><img class="img-fluid"
+
                                                                                        src="https://2019.igem.org/wiki/images/3/31/T--Tuebingen--JBS_logo.png"></a>
+
                    </div>
+
                    <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
                        <a href="https://www.gbo.com/" target="_blank2"><img class="img-fluid"
+
                                                                            src="https://2019.igem.org/wiki/images/a/ae/T--Tuebingen--greiner_logo.png"></a>
+
                    </div>
+
                    <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
                        <a href="http://www.metabion.com/" target="_blank2"><img class="img-fluid"
+
                                                                                src="https://2019.igem.org/wiki/images/4/41/T--Tuebingen--Logo-Metabion.png"></a>
+
                    </div>
+
                    <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
                        <a href="https://www.microsynth.ch/home-ch.html" target="_blank2"><img class="img-fluid"
+
                                                                                              src="https://2019.igem.org/wiki/images/1/18/T--Tuebingen--microsynth_logo.png"></a>
+
                    </div>
+
                    <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
                        <a href="https://www.neb.com/" target="_blank2"><img class="img-fluid"
+
                                                                            src="https://2019.igem.org/wiki/images/2/29/T--Tuebingen--neb_logo.png"></a>
+
                    </div>
+
 
                 </div>
 
                 </div>
              
+
   
                 <div class='row align-items-center'>
+
        </div>
                    <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"
+
        <hr>
                                                                                  src="https://2019.igem.org/wiki/images/f/f8/T--Tuebingen--promega_logo.png"></a>
+
        <div class='row align-items-center'>
                    </div>
+
             <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
                    <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
                 <a href="https://www.lexogen.com/" 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/4/43/T--Tuebingen--lexogen_logo.png"></a>
                                                                                  src="https://2019.igem.org/wiki/images/9/92/T--Tuebingen--qiagen_logo.png"></a>
+
            </div>
                    </div>
+
            <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
                    <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
                <a href="https://www.zmbp.uni-tuebingen.de/zmbp.html" target="_blank2"><img class="img-fluid"
                        <a href="https://www.carlroth.com/en/en" target="_blank2"><img class="img-fluid"
+
                                                                                            src="https://2019.igem.org/wiki/images/d/d8/T--Tuebingen--zmbp_logo.png"
                                                                                      src="https://2019.igem.org/wiki/images/6/61/T--Tuebingen--roth_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-4 col-md-2 col-xl-1 sponsorLogo text-center'>
                        <a href="https://www.sitoolsbiotech.com/" target="_blank2"><img class="img-fluid"
+
                <a href="http://s466755640.online.de/4bl/" target="_blank2"><img class="img-fluid"
                                                                                        src="https://2019.igem.org/wiki/images/3/31/T--Tuebingen--sibiotools_logo.png"></a>
+
                                                                                src="https://2019.igem.org/wiki/images/0/0b/T--Tuebingen--4base_logo.png"></a>
                    </div>
+
            </div>
                    <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
            <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
                        <a href="https://www.snapgene.com/" target="_blank2"><img class="img-fluid"
+
                <a href="https://www.agilent.com/" target="_blank2"><img class="img-fluid"
                                                                                  src="https://2019.igem.org/wiki/images/3/3a/T--Tuebingen--snapgene_logo.png"></a>
+
                                                                        src="https://2019.igem.org/wiki/images/e/e7/T--Tuebingen--agilent_logo.png"></a>
                    </div>
+
            </div>
                    <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
            <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
                        <a href="https://www.trilinkbiotech.com/" target="_blank2"><img class="img-fluid"
+
                <a href="https://www.digitalocean.com/" target="_blank2"><img class="img-fluid"
                                                                                        src="https://2019.igem.org/wiki/images/b/b6/T--Tuebingen--trilink_logo.png"></a>
+
                                                                              src="https://2019.igem.org/wiki/images/6/67/T--Tuebingen--digitalocean_logo.png"></a>
                    </div>
+
            </div>
                    <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
            <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
                        <a href="https://twistbioscience.com/" target="_blank2"><img class="img-fluid"
+
                <a href="https://dwk.com/" target="_blank2"><img class="img-fluid"
                                                                                    src="https://2019.igem.org/wiki/images/4/4c/T--Tuebingen--Logo-Twist.png"></a>
+
                                                                src="https://2019.igem.org/wiki/images/c/ce/T--Tuebingen--dwk_logo.png"></a>
                    </div>
+
            </div>
                    <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
            <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
                        <a href="http://www.vazymebiotech.com/" target="_blank2"><img class="img-fluid"
+
                <a href="https://www.eppendorf.com/" target="_blank2"><img class="img-fluid"
                                                                                      src="https://2019.igem.org/wiki/images/b/b7/T--Tuebingen--vazyme_logo.png"></a>
+
                                                                          src="https://2019.igem.org/wiki/images/a/a6/T--Tuebingen--eppendorf_logo.png"></a>
                    </div>
+
            </div>
                    <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
            <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
                        <a href="https://www.biolegend.com/" target="_blank2"><img class="img-fluid"
+
                <a href="https://www.implen.de/" target="_blank2"><img class="img-fluid"
                                                                                  src="https://2019.igem.org/wiki/images/c/c3/T--Tuebingen--biolegend_logo.png"></a>
+
                                                                      src="https://2019.igem.org/wiki/images/b/bb/T--Tuebingen--Logo-Implen.png"></a>
                    </div>
+
            </div>
                    <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
            <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
                        <a href="https://www.zymoresearch.de/" target="_blank2"><img class="img-fluid"
+
                <a href="https://www.jenabioscience.com/" target="_blank2"><img class="img-fluid"
                                                                                    src="https://2019.igem.org/wiki/images/6/6e/T--Tuebingen--zymo_logo.png"></a>
+
                                                                                src="https://2019.igem.org/wiki/images/3/31/T--Tuebingen--JBS_logo.png"></a>
                    </div>
+
            </div>
                 </div>
+
            <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
</div>
+
                <a href="https://www.gbo.com/" target="_blank2"><img class="img-fluid"
</p>
+
                                                                    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>
 +
   
 +
        <div class='row align-items-center'>
 +
            <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 class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
 +
                <a href="https://www.promega.de/en/" target="_blank2"><img class="img-fluid"
 +
                                                                          src="https://2019.igem.org/wiki/images/f/f8/T--Tuebingen--promega_logo.png"></a>
 +
            </div>
 +
            <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
 +
                <a href="https://www.qiagen.com/us/" target="_blank2"><img class="img-fluid"
 +
                                                                          src="https://2019.igem.org/wiki/images/9/92/T--Tuebingen--qiagen_logo.png"></a>
 +
            </div>
 +
            <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
 +
                <a href="https://www.carlroth.com/en/en" target="_blank2"><img class="img-fluid"
 +
                                                                              src="https://2019.igem.org/wiki/images/6/61/T--Tuebingen--roth_logo.png"></a>
 +
            </div>
 +
            <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
 +
                <a href="https://www.sitoolsbiotech.com/" target="_blank2"><img class="img-fluid"
 +
                                                                                src="https://2019.igem.org/wiki/images/3/31/T--Tuebingen--sibiotools_logo.png"></a>
 +
            </div>
 +
            <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
 +
                <a href="https://www.snapgene.com/" target="_blank2"><img class="img-fluid"
 +
                                                                          src="https://2019.igem.org/wiki/images/3/3a/T--Tuebingen--snapgene_logo.png"></a>
 +
            </div>
 +
            <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
 +
                <a href="https://www.trilinkbiotech.com/" target="_blank2"><img class="img-fluid"
 +
                                                                                src="https://2019.igem.org/wiki/images/b/b6/T--Tuebingen--trilink_logo.png"></a>
 +
            </div>
 +
            <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
 +
                <a href="https://twistbioscience.com/" target="_blank2"><img class="img-fluid"
 +
                                                                            src="https://2019.igem.org/wiki/images/4/4c/T--Tuebingen--Logo-Twist.png"></a>
 +
            </div>
 +
            <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
 +
                <a href="http://www.vazymebiotech.com/" target="_blank2"><img class="img-fluid"
 +
                                                                              src="https://2019.igem.org/wiki/images/b/b7/T--Tuebingen--vazyme_logo.png"></a>
 +
            </div>
 +
            <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
 +
                <a href="https://www.biolegend.com/" target="_blank2"><img class="img-fluid"
 +
                                                                          src="https://2019.igem.org/wiki/images/c/c3/T--Tuebingen--biolegend_logo.png"></a>
 +
            </div>
 +
            <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
 +
                <a href="https://www.zymoresearch.de/" target="_blank2"><img class="img-fluid"
 +
                                                                            src="https://2019.igem.org/wiki/images/6/6e/T--Tuebingen--zymo_logo.png"></a>
 +
            </div>
 +
            <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
 +
                 <a href="https://www.eurofins.com/" target="_blank2"><img class="img-fluid"
 +
                                                                            src="https://2019.igem.org/wiki/images/c/cd/T--Tuebingen--eurofins_logo.svg"></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/popup-imagesJS?action=raw&ctype=text/javascript"></script>
 
<div class="visualClear"></div>
 
</div>
 
</div>
 
 
</div>
 
</div>
 
 
</html>
 
</html>

Latest revision as of 19:10, 21 October 2019

GLP.exe

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

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

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

Yet...
meetUp

Current Drugs

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

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

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

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

However...
meetUp

There's a solution!

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

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

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

Safety
meetUp

is our highest priority!

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

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

Additionally
meetUp

An in depth E. coli Nissle characterization

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

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

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

Bringing it all together
meetUp

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