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

 
(18 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"/>
+
<meta charset="UTF-8" content="width=device-width, initial-scale=1.0"/>
 
<style>
 
<style>
 
     /*!
 
     /*!
Line 2,902: Line 2,902:
 
     .btn-outline-dark:not(:disabled):not(.disabled).active:focus, .btn-outline-dark:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-dark.dropdown-toggle:focus {
 
     .btn-outline-dark:not(:disabled):not(.disabled).active:focus, .btn-outline-dark:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-dark.dropdown-toggle:focus {
 
         box-shadow: 0 0 0 .2rem rgba(52, 58, 64, .5)
 
         box-shadow: 0 0 0 .2rem rgba(52, 58, 64, .5)
 +
    }
 +
 +
    .btn-link {
 +
        font-weight: 400;
 +
        color: #007bff;
 +
        background-color: transparent
 +
    }
 +
 +
    .btn-link:hover {
 +
        color: #0056b3;
 +
        text-decoration: underline;
 +
        background-color: transparent;
 +
        border-color: transparent
 +
    }
 +
 +
    .btn-link.focus, .btn-link:focus {
 +
        text-decoration: underline;
 +
        border-color: transparent;
 +
        box-shadow: none
 +
    }
 +
 +
    .btn-link.disabled, .btn-link:disabled {
 +
        color: #6c757d;
 +
        pointer-events: none
 
     }
 
     }
  
Line 5,959: Line 5,983:
  
 
     .bg-dark {
 
     .bg-dark {
−
         background-color: #343a40 !important
+
         background-color: #232323 !important
 
     }
 
     }
  
Line 9,049: 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,185: Line 9,204:
  
  
−
     /* sponsor foooter */
+
     /* sponsor footer */
 
     .sponsorLogo img {
 
     .sponsorLogo img {
 
         padding: 8px;
 
         padding: 8px;
Line 9,208: Line 9,227:
  
 
     .dropdown-menu {
 
     .dropdown-menu {
−
         background-color: rgba(100, 100, 100, 1);
+
         background-color: #232323;
 
     }
 
     }
  
Line 9,221: Line 9,240:
  
 
     /*++++++++++++++++++++++++++++++++
 
     /*++++++++++++++++++++++++++++++++
−
contents CSS ++++++++++++++++++++++++++++++*/
+
    contents CSS ++++++++++++++++++++++++++++++*/
 
     * {
 
     * {
 
         box-sizing: border-box;
 
         box-sizing: border-box;
Line 9,287: Line 9,306:
 
     .post-content h1 {
 
     .post-content h1 {
 
         padding-top: 30px;
 
         padding-top: 30px;
−
         color: rgba(105, 202, 98, 1.1);
+
         color: rgba(0, 158, 198, 1);
 
     }
 
     }
  
Line 9,293: Line 9,312:
 
     .post-content h2 {
 
     .post-content h2 {
 
         padding-top: 150px;
 
         padding-top: 150px;
−
         color: rgba(105, 202, 98, 1.1);
+
         color: rgba(0, 158, 198, 1);
 
     }
 
     }
  
 
     /* link color */
 
     /* link color */
 
     .post-content a {
 
     .post-content a {
−
         color: rgba(105, 202, 98, 1.1);
+
         color: #009EC6;
 
     }
 
     }
  
 
     #glpreferences a {
 
     #glpreferences a {
−
         color: rgba(105, 202, 98, 1.1);
+
         color: #009EC6;
 
     }
 
     }
  
Line 9,314: Line 9,333:
 
         bottom: auto;
 
         bottom: auto;
 
         display: none;
 
         display: none;
−
         stroke: rgba(105, 202, 98, 1.1);
+
         stroke: #009EC6;
 
         transform: translateY(-50%);
 
         transform: translateY(-50%);
 
     }
 
     }
Line 9,349: Line 9,368:
 
     a.toc-reading,
 
     a.toc-reading,
 
     a.toc-already-read.toc-reading {
 
     a.toc-already-read.toc-reading {
−
         color: rgba(105, 202, 98, 1.1);
+
         color: #009EC6;
 
         opacity: 1;
 
         opacity: 1;
 
     }
 
     }
Line 9,369: 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%;
 +
         box-shadow: 0 0 0 1px #d9d9d9 inset;
 
         color: #4d4d4d;
 
         color: #4d4d4d;
 
     }
 
     }
Line 9,378: Line 9,398:
  
 
     /*++++++++++++++++++++++++++++++++
 
     /*++++++++++++++++++++++++++++++++
−
contents End ++++++++++++++++++++++++++++++*/
+
    contents End ++++++++++++++++++++++++++++++*/
  
  
Line 9,575: 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,640: Line 9,659:
 
         }
 
         }
 
     }
 
     }
 +
 
</style>
 
</style>
  
−
</p>
 
−
<p>
 
  
−
    <head>
+
<head>
−
        <title>GLP.exe</title>
+
    <title>GLP.exe</title>
−
        <meta charset="utf-8">
+
    <meta charset="utf-8">
−
        <meta name="viewport" content="width=device-width, initial-scale=1">
+
    <meta name="viewport" content="width=device-width, initial-scale=1">
−
        <link rel="stylesheet" href="https://2019.igem.org/Template:Tuebingen/FontAwesomeCSS">
+
    <link rel="stylesheet" href="https://2019.igem.org/Template:Tuebingen/FontAwesomeCSS">
−
        <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Righteous"/>
+
    <link rel="stylesheet" href="https://2019.igem.org/Team:Tuebingen/aosCSS?action=raw&ctype=text/css"/>
−
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" type="text/css"/>
+
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Righteous"/>
−
        <style>
+
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"
−
            .mfp-bg {
+
          type="text/css"/>
−
                top: 0;
+
    <script src="https://2019.igem.org/Team:Tuebingen/jqueryminjs?action=raw&amp;ctype=text/javascript"></script>
−
                left: 0;
+
    <script src="https://2019.igem.org/Team:Tuebingen/popperjs?action=raw&amp;ctype=text/javascript"></script>
−
                width: 100%;
+
    <script src="https://2019.igem.org/Team:Tuebingen/bootstrapjs?action=raw&amp;ctype=text/javascript"></script>
−
                height: 100%;
+
    <script src="https://2019.igem.org/Template:Tuebingen/GLPexeJS?action=raw&amp;ctype=text/javascript"></script>
−
                z-index: 1042;
+
</head>
−
                overflow: hidden;
+
−
                position: fixed;
+
−
                background: #0b0b0b;
+
−
                opacity: 0.8;
+
−
            }
+
  
−
            .mfp-wrap {
+
<body style="">
−
                top: 0;
+
<section id="nav-placeholder">
−
                left: 0;
+
    <nav class="shadow navbar navbar-expand-md navbar-dark fixed-top"
−
                width: 100%;
+
        style="background-color: rgba(30, 30, 30, 0.3); z-index: 100;">
−
                height: 100%;
+
        <a class="navbar-brand" href="https://2019.igem.org/Team:Tuebingen">
−
                z-index: 1043;
+
            <img src="https://2019.igem.org/wiki/images/2/2a/T--Tuebingen--white_logo_animated.gif" alt="logo"
−
                position: fixed;
+
                style="width:70px;">
−
                outline: none !important;
+
            <h5 class="d-inline ml-3" style="font-family: 'Righteous', cursive; font-weight: normal;">GLP.exe</h5>
−
                 -webkit-backface-visibility: hidden;
+
        </a>
−
            }
+
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
 +
            <span class="navbar-toggler-icon"></span>
 +
        </button>
 +
        <div class="collapse navbar-collapse justify-content-around" id="collapsibleNavbar">
 +
            <ul class="navbar-nav">
 +
                 <li id="ourStoryButton" class="nav-item mx-3">
 +
                    <a class="nav-link" href="/Team:Tuebingen/Story"
 +
                      style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">OUR
 +
                        STORY</a>
 +
                </li>
  
−
            .mfp-container {
+
                <li class="nav-item dropdown mx-3">
−
                text-align: center;
+
                    <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"
−
                position: absolute;
+
                      style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">
−
                width: 100%;
+
                        PROJECT
−
                height: 100%;
+
                    </a>
−
                left: 0;
+
                    <div class="dropdown-menu">
−
                top: 0;
+
                        <a class="dropdown-item" href="/Team:Tuebingen/Description"
−
                padding: 0 8px;
+
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Description</a>
−
                 box-sizing: border-box;
+
                        <a class="dropdown-item" href="/Team:Tuebingen/Killswitch"
−
            }
+
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Kill Switch</a>
 +
                        <a class="dropdown-item" href="/Team:Tuebingen/Nissle"
 +
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Nissle</a>
 +
                        <a class="dropdown-item" href="/Team:Tuebingen/Incretin"
 +
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Incretin</a>
 +
                        <a class="dropdown-item" href="/Team:Tuebingen/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/Results"
 +
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Results</a>
 +
                        <a class="dropdown-item" href="/Team:Tuebingen/Demonstrate"
 +
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Demonstrate</a>
 +
                        <a class="dropdown-item" href="/Team:Tuebingen/Notebook"
 +
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Notebook</a>
 +
                        <a class="dropdown-item" href="/Team:Tuebingen/Outlook"
 +
                          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>
 +
                </li>
 +
                 <li class="nav-item dropdown mx-3">
 +
                    <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"
 +
                      style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">
 +
                        PARTS
 +
                    </a>
 +
                    <div class="dropdown-menu">
 +
                        <a class="dropdown-item" href="/Team:Tuebingen/Parts"
 +
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Parts
 +
                            Overview</a>
 +
                        <a class="dropdown-item" href="/Team:Tuebingen/Basic_Part"
 +
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Basic
 +
                            Parts</a>
 +
                        <a class="dropdown-item" href="/Team:Tuebingen/Improved_Part"
 +
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Improved
 +
                            Parts</a>
 +
                        <a class="dropdown-item" href="/Team:Tuebingen/Characterized_Part"
 +
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Characterized
 +
                            Parts</a>
 +
                        <a class="dropdown-item" href="/Team:Tuebingen/Composite_Part"
 +
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Composite
 +
                            Parts</a>
 +
                        <a class="dropdown-item" href="/Team:Tuebingen/Part_Collection"
 +
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Part
 +
                            Collection</a>
 +
                        <a class="dropdown-item" href="/Team:Tuebingen/Downloads"
 +
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Downloads</a>
 +
                    </div>
 +
                </li>
  
−
            .mfp-container:before {
+
                <li class="nav-item dropdown mx-3">
−
                content: '';
+
                    <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"
−
                display: inline-block;
+
                      style="font-family: 'Righteous', cursive; font-weight: normal;color: #2ecc71;">
−
                height: 100%;
+
                        PEOPLE
−
                vertical-align: middle;
+
                    </a>
−
            }
+
                    <div class="dropdown-menu">
 +
                        <a class="dropdown-item" href="/Team:Tuebingen/Team"
 +
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Team</a>
 +
                        <a class="dropdown-item" href="/Team:Tuebingen/Collaborations"
 +
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Collaborations</a>
 +
                        <a class="dropdown-item" href="/Team:Tuebingen/Sponsors"
 +
                          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"
 +
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Gallery</a>
 +
                    </div>
 +
                </li>
  
−
            .mfp-align-top .mfp-container:before {
+
                <li class="nav-item dropdown mx-3">
−
                 display: none;
+
                    <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"
−
            }
+
                      style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">
 +
                        HUMAN PRACTICES
 +
                    </a>
 +
                    <div class="dropdown-menu">
 +
                        <a class="dropdown-item" href="/Team:Tuebingen/Human_Practices"
 +
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Overview</a>
 +
                        <a class="dropdown-item" href="/Team:Tuebingen/Public_Engagement"
 +
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Education & Public Engagement</a>
 +
                        <a class="dropdown-item" href="/Team:Tuebingen/Experts"
 +
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Experts</a>
 +
                        <a class="dropdown-item" href="/Team:Tuebingen/SDG"
 +
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Sustainable Development Goals</a>
 +
                        <a class="dropdown-item" href="/Team:Tuebingen/Experimenta"
 +
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Experimenta
 +
                            Science Center</a>
 +
                        <a class="dropdown-item" href="/Team:Tuebingen/Survey"
 +
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Survey</a>
 +
                    </div>
 +
                 </li>
 +
                <li class="nav-item dropdown mx-3">
 +
                    <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"
 +
                      style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">
 +
                        AWARDS
 +
                    </a>
 +
                    <div class="dropdown-menu">
 +
                        <a class="dropdown-item" href="/Team:Tuebingen/Human_Practices"
 +
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Integrated Human Practise</a>
 +
                        <a class="dropdown-item" href="/Team:Tuebingen/Public_Engagement"
 +
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Education & Public Engagement</a>
 +
                        <a class="dropdown-item" href="/Team:Tuebingen/Entrepreneurship"
 +
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Supporting Entrepreneurship</a>
 +
                        <a class="dropdown-item" href="/Team:Tuebingen/Model"
 +
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Model</a>
 +
                        <a class="dropdown-item" href="/Team:Tuebingen/Software"
 +
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Software</a>
 +
                    </div>
 +
                </li>
  
−
            .mfp-content {
+
                <li class="nav-item mx-3">
−
                position: relative;
+
                    <a class="nav-link" href="/Team:Tuebingen/Safety"
−
                display: inline-block;
+
                      style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">SAFETY</a>
−
                vertical-align: middle;
+
                </li>
−
                margin: 0 auto;
+
−
                text-align: left;
+
−
                z-index: 1045;
+
−
            }
+
  
−
            .mfp-inline-holder .mfp-content,
+
                <li class="nav-item mx-3">
−
            .mfp-ajax-holder .mfp-content {
+
                    <a class="nav-link" href="https://igem.org/2019_Judging_Form?team=Tuebingen" target="_blank"
−
                width: 100%;
+
                      style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">JUDGING FORM ⇗</a>
−
                cursor: auto;
+
                </li>
−
            }
+
  
−
            .mfp-ajax-cur {
+
                <li class="nav-item mx-1 pt-2">
−
                 cursor: progress;
+
                    <a href="https://www.facebook.com/igemtuebingen/" class="fa fa-facebook" target="_blank"></a>
−
            }
+
                </li>
 +
                <li class="nav-item mx-1 pt-2">
 +
                    <a href="https://twitter.com/iGEMTuebingen" class="fa fa-twitter" target="_blank"></a>
 +
                 </li>
 +
                <li class="nav-item mx-1 pt-2">
 +
                    <a href="https://www.instagram.com/igem_tuebingen/" class="fa fa-instagram" target="_blank"></a>
 +
                </li>
  
−
             .mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
+
             </ul>
−
                cursor: -moz-zoom-out;
+
        </div>
−
                cursor: -webkit-zoom-out;
+
    </nav>
−
                cursor: zoom-out;
+
</section>
−
            }
+
<script>
 +
    var url = window.location.href;
 +
    $(function () {
 +
        $('.nav-link[href="' + url + '"]').addClass("active");
 +
        $('.dropdown-item[href="' + url + '"]').addClass("active");
 +
        $('.dropdown-item[href="' + url + '"]').parent().parent().addClass("active");
 +
    });
 +
</script>
 +
<script src="https://2019.igem.org/Team:Tuebingen/jqueryminjs?action=raw&ctype=text/javascript"></script>
 +
<script src="https://2019.igem.org/Team:Tuebingen/popperjs?action=raw&ctype=text/javascript"></script>
 +
<script src="https://2019.igem.org/Team:Tuebingen/bootstrapjs?action=raw&ctype=text/javascript"></script>
 +
<script src="https://2019.igem.org/Template:Tuebingen/GLPexeJS?action=raw&ctype=text/javascript"></script>
 +
<script src="https://2019.igem.org/Team:Tuebingen/aosJS?action=raw&ctype=text/javascript"></script>
 +
<script>
 +
    AOS.init();
 +
</script>
  
−
            .mfp-zoom {
+
</body>
−
                cursor: pointer;
+
−
                cursor: -webkit-zoom-in;
+
−
                cursor: -moz-zoom-in;
+
−
                cursor: zoom-in;
+
−
            }
+
  
−
            .mfp-auto-cursor .mfp-content {
 
−
                cursor: auto;
 
−
            }
 
  
−
            .mfp-close,
+
<style>
−
            .mfp-arrow,
+
−
            .mfp-preloader,
+
−
            .mfp-counter {
+
−
                -webkit-user-select: none;
+
−
                -moz-user-select: none;
+
−
                user-select: none;
+
−
            }
+
  
−
            .mfp-loading.mfp-figure {
+
    /* Scroll Down Icon*/
−
                display: none;
+
    #goToBox {
−
            }
+
        position: relative;
 +
        width: 30px;
 +
        height: 28px;
 +
        left: calc(50% - 15px);
 +
    }
  
−
            .mfp-hide {
+
    .chevron {
−
                display: none !important;
+
        position: absolute;
−
            }
+
        width: 28px;
 +
        height: 8px;
 +
        opacity: 0;
 +
        transform: scale3d(0.5, 0.5, 0.5);
 +
        animation: move 3s ease-out infinite;
 +
    }
  
−
            .mfp-preloader {
+
    .chevron:first-child {
−
                color: #CCC;
+
        animation: move 3s ease-out 1s infinite;
−
                position: absolute;
+
    }
−
                top: 50%;
+
−
                width: auto;
+
−
                text-align: center;
+
−
                margin-top: -0.8em;
+
−
                left: 8px;
+
−
                right: 8px;
+
−
                z-index: 1044;
+
−
            }
+
  
−
            .mfp-preloader a {
+
    .chevron:nth-child(2) {
−
                color: #CCC;
+
        animation: move 3s ease-out 2s infinite;
−
            }
+
    }
  
−
            .mfp-preloader a:hover {
+
    .chevron:before,
−
                color: #FFF;
+
    .chevron:after {
−
            }
+
        content: ' ';
 +
        position: absolute;
 +
        top: 0;
 +
        height: 100%;
 +
        width: 51%;
 +
        background: #fff;
 +
    }
  
−
            .mfp-s-ready .mfp-preloader {
+
    .chevron:before {
−
                display: none;
+
        left: 0;
−
            }
+
        transform: skew(0deg, 30deg);
 +
    }
  
−
            .mfp-s-error .mfp-content {
+
    .chevron:after {
−
                display: none;
+
        right: 0;
−
            }
+
        width: 50%;
 +
        transform: skew(0deg, -30deg);
 +
    }
  
−
            button.mfp-close,
+
    @keyframes move {
−
            button.mfp-arrow {
+
        25% {
−
                overflow: visible;
+
            opacity: 1;
−
                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;
+
        33% {
−
                border: 0;
+
             opacity: 1;
−
             }
+
            transform: translateY(30px);
 +
        }
 +
        67% {
 +
            opacity: 1;
 +
            transform: translateY(40px);
 +
        }
 +
        100% {
 +
            opacity: 0;
 +
             transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
 +
        }
 +
    }
  
−
            .mfp-close {
+
    @keyframes pulse {
−
                width: 44px;
+
        to {
−
                height: 44px;
+
            opacity: 1;
−
                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 {
+
    /* FlowChart*/
−
                top: 1px;
+
    .circleO {
−
            }
+
        height: 60px;
 +
        width: 60px;
 +
        padding: auto;
 +
        border-radius: 50%;
 +
        background-color: rgba(230, 230, 230, 1);
 +
        color: black;
 +
        z-index: 2;
 +
    }
  
−
            .mfp-close-btn-in .mfp-close {
+
    .circleO img {
−
                color: #333;
+
        max-height: 40px;
−
            }
+
        width: auto;
 +
    }
  
−
            .mfp-image-holder .mfp-close,
+
    .circleS {
−
            .mfp-iframe-holder .mfp-close {
+
        height: 60px;
−
                color: #FFF;
+
        width: 60px;
−
                right: -6px;
+
        padding: auto;
−
                text-align: right;
+
        border-radius: 50%;
−
                padding-right: 6px;
+
        background-image: linear-gradient(rgba(1, 101, 224, 1), rgba(0, 203, 177, 1));
−
                width: 100%;
+
        color: black;
−
            }
+
        z-index: 2;
 +
    }
  
−
            .mfp-counter {
+
    .circleS img {
−
                position: absolute;
+
        max-height: 40px;
−
                top: 0;
+
        width: auto;
−
                right: 0;
+
    }
−
                color: #CCC;
+
−
                font-size: 12px;
+
−
                line-height: 18px;
+
−
                white-space: nowrap;
+
−
            }
+
  
−
            .mfp-arrow {
+
    .circleM {
−
                position: absolute;
+
        height: 100px;
−
                opacity: 0.65;
+
        width: 100px;
−
                margin: 0;
+
        padding: auto;
−
                top: 50%;
+
        border-radius: 50%;
−
                margin-top: -55px;
+
        background-image: linear-gradient(rgba(1, 101, 224, 1), rgba(0, 203, 177, 1));
−
                padding: 0;
+
        color: black;
−
                width: 90px;
+
        z-index: 2;
−
                height: 110px;
+
        1, 101, 224
−
                -webkit-tap-highlight-color: transparent;
+
    }
−
            }
+
  
−
            .mfp-arrow:active {
+
    .circleM img {
−
                margin-top: -54px;
+
        max-height: 80px;
−
            }
+
        width: auto;
 +
    }
  
−
            .mfp-arrow:hover,
+
    .circleL {
−
            .mfp-arrow:focus {
+
        height: 160px;
−
                opacity: 1;
+
        width: 160px;
−
            }
+
        padding: auto;
 +
        border-radius: 50%;
 +
        background-image: linear-gradient(rgba(1, 101, 224, 1), rgba(0, 203, 177, 1));
 +
        color: black;
 +
        z-index: 2;
 +
    }
  
−
            .mfp-arrow:before,
+
    .circleL img {
−
            .mfp-arrow:after {
+
        max-height: 130px;
−
                content: '';
+
        width: auto;
−
                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 {
+
    #conceptFlow h5 {
−
                border-top-width: 13px;
+
        font-weight: bold;
−
                border-bottom-width: 13px;
+
        font-size: 2rem;
−
                top: 8px;
+
        margin-bottom: 30px;
−
            }
+
        color: #009ec6;
 +
    }
  
−
            .mfp-arrow:before {
+
    #conceptFlow span {
−
                border-top-width: 21px;
+
        font-size: 1.5rem;
−
                border-bottom-width: 21px;
+
    }
−
                opacity: 0.7;
+
−
            }
+
  
−
            .mfp-arrow-left {
+
    /* height of each section*/
−
                left: 0;
+
    .how-it-works.row {
−
            }
+
        height: 50vh
 +
    }
  
−
            .mfp-arrow-left:after {
+
    .how-it-works.row .col-3 {
−
                border-right: 17px solid #FFF;
+
        align-self: stretch;
−
                margin-left: 31px;
+
    }
−
            }
+
  
−
            .mfp-arrow-left:before {
+
    .how-it-works.row .col-3::after {
−
                margin-left: 25px;
+
        content: "";
−
                border-right: 27px solid #3F3F3F;
+
        position: absolute;
−
            }
+
        border-left: 3px solid rgba(82, 187, 199, 1);
 +
        z-index: 1;
 +
    }
  
−
            .mfp-arrow-right {
+
    .diagnosis.row .col-3::after {
−
                right: 0;
+
        content: "";
−
            }
+
        position: absolute;
 +
        border-left: 3px dotted rgba(82, 187, 199, 1);
 +
        z-index: 1;
 +
    }
  
−
            .mfp-arrow-right:after {
+
    .how-it-works.row .col-3.bottom::after {
−
                border-left: 17px solid #FFF;
+
        height: 50%;
−
                margin-left: 39px;
+
        left: 50%;
−
            }
+
        top: 50%;
 +
    }
  
−
            .mfp-arrow-right:before {
+
    .how-it-works.row .col-3.full::after {
−
                border-left: 27px solid #3F3F3F;
+
        height: 100%;
−
            }
+
        left: calc(50% - 3px);
 +
    }
  
−
            .mfp-iframe-holder {
+
    .how-it-works.row .col-3.fullRight::after {
−
                padding-top: 40px;
+
        height: 100%;
−
                padding-bottom: 40px;
+
        left: 50%;
−
            }
+
    }
  
−
            .mfp-iframe-holder .mfp-content {
+
    .how-it-works.row .col-3.top::after {
−
                line-height: 0;
+
        height: 50%;
−
                width: 100%;
+
        left: calc(50% - 3px);
−
                max-width: 900px;
+
        top: 0;
−
            }
+
        border: 2px dotted rgba(82, 187, 199, 1);
 +
    }
  
−
            .mfp-iframe-holder .mfp-close {
 
−
                top: -40px;
 
−
            }
 
  
−
            .mfp-iframe-scaler {
+
    .timeline div {
−
                width: 100%;
+
        padding: 0;
−
                height: 0;
+
        height: 40px;
−
                overflow: hidden;
+
    }
−
                padding-top: 56.25%;
+
−
            }
+
  
−
            .mfp-iframe-scaler iframe {
+
    .timeline hr {
−
                position: absolute;
+
        border-top: 3px solid rgba(82, 187, 199, 1);
−
                display: block;
+
        background-color: transparent;
−
                top: 0;
+
        margin: 0;
−
                left: 0;
+
        top: 17px;
−
                width: 100%;
+
        position: relative;
−
                height: 100%;
+
    }
−
                box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
+
−
                background: #000;
+
−
            }
+
  
−
            /* Main image in popup */
+
    .timeline .col-3 {
−
            img.mfp-img {
+
        display: flex;
−
                width: auto;
+
        overflow: hidden;
−
                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 */
+
    .timeline .corner {
−
            .mfp-figure {
+
        border: 3px solid rgba(82, 187, 199, 1);
−
                line-height: 0;
+
        width: 100%;
−
            }
+
        position: relative;
 +
        border-radius: 15px;
 +
    }
  
−
            .mfp-figure:after {
+
    .timeline .top-right {
−
                content: '';
+
        left: 50%;
−
                position: absolute;
+
        top: -50%;
−
                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 {
+
    .timeline .left-bottom {
−
                color: #BDBDBD;
+
        left: -50%;
−
                display: block;
+
        top: calc(50% - 3px);
−
                font-size: 12px;
+
    }
−
                line-height: 14px;
+
−
            }
+
  
−
            .mfp-figure figure {
+
    .timeline .top-left {
−
                margin: 0;
+
        left: -50%;
−
            }
+
        top: -50%;
 +
    }
  
−
            .mfp-bottom-bar {
+
    .timeline .right-bottom {
−
                margin-top: -36px;
+
        left: 50%;
−
                position: absolute;
+
        top: calc(50% - 3px);
−
                top: 100%;
+
    }
−
                left: 0;
+
−
                width: 100%;
+
−
                cursor: auto;
+
−
            }
+
  
−
            .mfp-title {
+
    /* Qoutes Part*/
−
                text-align: left;
+
    #warnPics {
−
                line-height: 18px;
+
        height: auto;
−
                color: #F3F3F3;
+
        min-height: 20vw;
−
                word-wrap: break-word;
+
        font-weight: 100;
−
                padding-right: 36px;
+
    }
−
            }
+
  
−
            .mfp-image-holder .mfp-content {
+
    #warnPics .qoutes span {
−
                max-width: 100%;
+
        font-size: 1.5rem;
−
            }
+
    }
  
−
            .mfp-gallery .mfp-image-holder .mfp-figure {
+
    #warnPics .qoutes {
−
                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 {
+
    #qoute1 {
−
                    padding: 0;
+
        background: linear-gradient(rgba(35, 35, 35, 1), rgba(35, 35, 35, .3), rgba(35, 35, 35, 1)), url("http://2018.igem.org/wiki/images/c/c9/T--Munich--death_background.png");
−
                }
+
        background-repeat: no-repeat;
 +
        background-size: cover;
 +
        background-position: center;
 +
        color: #fff;
 +
    }
  
−
                .mfp-img-mobile .mfp-figure:after {
+
    #qoute2 {
−
                    top: 0;
+
        background: linear-gradient(rgba(35, 35, 35, 1), rgba(35, 35, 35, .3), rgba(35, 35, 35, 1)), url("http://2018.igem.org/wiki/images/4/4e/T--Munich--WarningPic1.jpg");
−
                    bottom: 0;
+
        background-repeat: no-repeat;
−
                }
+
        background-size: cover;
 +
        background-position: center;
 +
        color: #fff;
 +
    }
  
−
                .mfp-img-mobile .mfp-figure small {
+
    #qoute3 {
−
                    display: inline;
+
        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");
−
                    margin-left: 5px;
+
        background-repeat: no-repeat;
−
                }
+
        background-size: cover;
 +
        background-position: top;
 +
        color: #fff;
 +
    }
  
−
                .mfp-img-mobile .mfp-bottom-bar {
+
    #whyTitle {
−
                    background: rgba(0, 0, 0, 0.6);
+
        background: rgba(35, 35, 35, 1);
−
                    bottom: 0;
+
    }
−
                    margin: 0;
+
−
                    top: auto;
+
−
                    padding: 3px 5px;
+
−
                    position: fixed;
+
−
                    box-sizing: border-box;
+
−
                }
+
  
−
                .mfp-img-mobile .mfp-bottom-bar:empty {
+
    .warningContent span {
−
                    padding: 0;
+
        font-size: 2.5rem;
−
                }
+
        font-weight: bold;
 +
    }
  
−
                .mfp-img-mobile .mfp-counter {
+
    .mobileText {
−
                    right: 5px;
+
        font-size: 1.5rem !important;
−
                    top: 3px;
+
        margin-top: 3rem;
−
                }
+
    }
  
−
                .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) {
+
    #conceptFlowTitle {
−
                .mfp-arrow {
+
        font-size: 2.5rem;
−
                    -webkit-transform: scale(0.75);
+
        font-weight: bold;
−
                    transform: scale(0.75);
+
    }
−
                }
+
  
−
                .mfp-arrow-left {
 
−
                    -webkit-transform-origin: 0;
 
−
                    transform-origin: 0;
 
−
                }
 
  
−
                .mfp-arrow-right {
+
    /* START PopUp STYLES */
−
                    -webkit-transform-origin: 100%;
+
    .labelBox {
−
                    transform-origin: 100%;
+
        display: inline;
−
                }
+
    }
  
−
                .mfp-container {
+
    .reg {
−
                    padding-left: 6px;
+
        background-color: white;
−
                    padding-right: 6px;
+
        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;
 +
    }
  
−
            .mfp-zoom-out {
+
    .reg:hover {
−
                /* start state */
+
        opacity: 0.8;
−
                /* animate in */
+
        -webkit-transition: all 0.3s ease-in-out;
−
                /* animate out */
+
        -moz-transition: all 0.3s ease-in-out;
−
            }
+
        transition: all 0.3s ease-in-out;
 +
    }
  
−
            .mfp-zoom-out .mfp-with-anim {
+
    .pop {
−
                opacity: 0;
+
        display: none;
−
                transition: all 0.3s ease-in-out;
+
        position: absolute;
−
                transform: scale(1.3);
+
        top: 75%;
−
            }
+
        max-width: 100%;
 +
        height: auto;
 +
        -webkit-border-radius: 6px;
 +
        -moz-border-radius: 6px;
 +
        -ms-border-radius: 6px;
 +
        -o-border-radius: 6px;
 +
        border-radius: 6px;
 +
        z-index: 200;
 +
        padding: 10px;
 +
        background-color: rgba(240, 240, 240, 1);
 +
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 +
    }
  
−
            .mfp-zoom-out.mfp-bg {
+
    .pop > h1 {
−
                opacity: 0;
+
        color: #009ec6;
−
                transition: all 0.3s ease-out;
+
        font-size: 100%;
−
            }
+
    }
  
−
            .mfp-zoom-out.mfp-ready .mfp-with-anim {
+
    .pop > p {
−
                opacity: 1;
+
        font-size: 100%;
−
                transform: scale(1);
+
        color: #777777;
−
            }
+
    }
  
−
            .mfp-zoom-out.mfp-ready.mfp-bg {
+
    .pop > span {
−
                opacity: 0.8;
+
        cursor: pointer;
−
            }
+
        position: absolute;
 +
        top: 10px;
 +
        right: 10px;
 +
        -webkit-border-radius: 100px;
 +
        -moz-border-radius: 100px;
 +
        color: #777777;
 +
        width: 30px;
 +
        height: 30px;
 +
    }
  
−
            .mfp-zoom-out.mfp-removing .mfp-with-anim {
+
    /* END PopUp STYLES */
−
                transform: scale(1.3);
+
−
                opacity: 0;
+
−
            }
+
  
−
            .mfp-zoom-out.mfp-removing.mfp-bg {
+
    .mobileTitle {
−
                opacity: 0;
+
        font-size: 3.5rem !important;
−
            }
+
    }
−
        </style>
+
  
−
     </head>
+
     .readButton, .readButton:visited {
 +
        color: #17a2b8;
 +
    }
  
−
<body style="">
+
     .readButton:hover {
−
     <section id="nav-placeholder">
+
         color: white;
−
         <nav class="shadow navbar navbar-expand-md navbar-dark fixed-top"
+
    }
−
            style="background-color: rgba(30, 30, 30, 0.3); z-index: 100;">
+
−
            <a class="navbar-brand" href="https://2019.igem.org/Team:Tuebingen">
+
−
                <img src="https://2019.igem.org/wiki/images/2/2a/T--Tuebingen--white_logo_animated.gif" alt="logo"
+
−
                    style="width:70px;">
+
−
                <h5 class="d-inline ml-3" style="font-family: 'Righteous', cursive; font-weight: normal;">GLP.exe</h5>
+
−
            </a>
+
−
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
+
−
                <span class="navbar-toggler-icon"></span>
+
−
            </button>
+
−
            <div class="collapse navbar-collapse justify-content-around" id="collapsibleNavbar">
+
−
                <ul class="navbar-nav">
+
−
                    <li id="ourStoryButton" class="nav-item mx-3">
+
−
                        <a class="nav-link" href="/Team:Tuebingen/Story" style="font-family: 'Righteous', cursive; font-weight: normal;">OUR STORY</a>
+
−
                    </li>
+
  
−
                    <li class="nav-item dropdown mx-3">
+
    .showCase .row {
−
                        <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown" style="font-family: 'Righteous', cursive; font-weight: normal;" >
+
        padding-left: 10vw;
−
                            PROJECT
+
        padding-right: 10vw;
−
                        </a>
+
    }
−
                        <div class="dropdown-menu">
+
−
                            <a class="dropdown-item" href="/Team:Tuebingen/Description" style="font-family: 'Righteous', cursive; font-weight: normal;">Description</a>
+
−
                            <a class="dropdown-item" href="/Team:Tuebingen/Killswitch" style="font-family: 'Righteous', cursive; font-weight: normal;">Kill Switch</a>
+
−
                            <a class="dropdown-item" href="/Team:Tuebingen/Nissle" style="font-family: 'Righteous', cursive; font-weight: normal;">Nissle</a>
+
−
                            <a class="dropdown-item" href="/Team:Tuebingen/Incretin" style="font-family: 'Righteous', cursive; font-weight: normal;">Incretin</a>
+
−
                            <a class="dropdown-item" href="/Team:Tuebingen/CPP" style="font-family: 'Righteous', cursive; font-weight: normal;">Cell Penetrating Peptides</a>
+
−
                            <a class="dropdown-item" href="/Team:Tuebingen/Results" style="font-family: 'Righteous', cursive; font-weight: normal;">Results</a>
+
−
                            <a class="dropdown-item" href="/Team:Tuebingen/Demonstrate" style="font-family: 'Righteous', cursive; font-weight: normal;">Demonstrate</a>
+
−
                            <a class="dropdown-item" href="/Team:Tuebingen/Notebook" style="font-family: 'Righteous', cursive; font-weight: normal;">Notebook</a>
+
−
                            <a class="dropdown-item" href="/Team:Tuebingen/Model" style="font-family: 'Righteous', cursive; font-weight: normal;">Model</a>
+
−
                            <a class="dropdown-item" href="/Team:Tuebingen/Software" style="font-family: 'Righteous', cursive; font-weight: normal;">Software</a>
+
−
                            <a class="dropdown-item" href="/Team:Tuebingen/Outlook" style="font-family: 'Righteous', cursive; font-weight: normal;">Outlook</a>
+
−
                        </div>
+
−
                    </li>
+
−
                    <li class="nav-item dropdown mx-3">
+
−
                        <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown" style="font-family: 'Righteous', cursive; font-weight: normal;">
+
−
                            PARTS
+
−
                        </a>
+
−
                        <div class="dropdown-menu">
+
−
                            <a class="dropdown-item" href="/Team:Tuebingen/Parts" style="font-family: 'Righteous', cursive; font-weight: normal;">Parts Overview</a>
+
−
                            <a class="dropdown-item" href="/Team:Tuebingen/Basic_Part" style="font-family: 'Righteous', cursive; font-weight: normal;">Basic Parts</a>
+
−
                            <a class="dropdown-item" href="/Team:Tuebingen/Improved_Part" style="font-family: 'Righteous', cursive; font-weight: normal;">Improved Parts</a>
+
−
                            <a class="dropdown-item" href="/Team:Tuebingen/Composite_Part" style="font-family: 'Righteous', cursive; font-weight: normal;">Composite Parts</a>
+
−
                            <a class="dropdown-item" href="/Team:Tuebingen/Part_Collection" style="font-family: 'Righteous', cursive; font-weight: normal;">Part Collection</a>
+
−
                        </div>
+
−
                    </li>
+
  
−
                    <li class="nav-item dropdown mx-3">
+
    @media only screen and (max-width: 767.98px) {
−
                        <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown" style="font-family: 'Righteous', cursive; font-weight: normal;">
+
        #videoBox #videoShow {
−
                            PEOPLE
+
            position: relative;
−
                        </a>
+
        }
−
                        <div class="dropdown-menu">
+
−
                            <a class="dropdown-item" href="/Team:Tuebingen/Team" style="font-family: 'Righteous', cursive; font-weight: normal;">Team</a>
+
−
                            <a class="dropdown-item" href="/Team:Tuebingen/Collaborations" style="font-family: 'Righteous', cursive; font-weight: normal;">Collaborations</a>
+
−
                            <a class="dropdown-item" href="/Team:Tuebingen/Attributions" style="font-family: 'Righteous', cursive; font-weight: normal;">Attributions</a>
+
−
                            <a class="dropdown-item" href="/Team:Tuebingen/Sponsors" style="font-family: 'Righteous', cursive; font-weight: normal;">Sponsors</a>
+
−
                            <a class="dropdown-item" href="/Team:Tuebingen/Gallery" style="font-family: 'Righteous', cursive; font-weight: normal;">Gallery</a>
+
−
                        </div>
+
−
                    </li>
+
  
−
                    <li class="nav-item dropdown mx-3">
+
        #PhactoryTitle {
−
                        <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown" style="font-family: 'Righteous', cursive; font-weight: normal;">
+
            font-size: 4rem;
−
                            HUMAN PRACTICES
+
        }
−
                        </a>
+
−
                        <div class="dropdown-menu">
+
−
                            <a class="dropdown-item" href="/Team:Tuebingen/Human_Practices" style="font-family: 'Righteous', cursive; font-weight: normal;">Overview</a>
+
−
                            <a class="dropdown-item" href="/Team:Tuebingen/Public_Engagement" style="font-family: 'Righteous', cursive; font-weight: normal;">Education & Public Engagement</a>
+
−
                            <a class="dropdown-item" href="/Team:Tuebingen/Experts" style="font-family: 'Righteous', cursive; font-weight: normal;">Experts</a>
+
−
                            <a class="dropdown-item" href="/Team:Tuebingen/Entrepreneurship" style="font-family: 'Righteous', cursive; font-weight: normal;">Entrepreneurship</a>
+
−
                            <a class="dropdown-item" href="/Team:Tuebingen/SDG" style="font-family: 'Righteous', cursive; font-weight: normal;">Sustainable Development Goals</a>
+
−
                            <a class="dropdown-item" href="/Team:Tuebingen/Experimenta" style="font-family: 'Righteous', cursive; font-weight: normal;">Experimenta Science Center</a>
+
−
                        </div>
+
−
                    </li>
+
−
                    <li class="nav-item dropdown mx-3">
+
−
                        <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown" style="font-family: 'Righteous', cursive; font-weight: normal;">
+
−
                            AWARDS
+
−
                        </a>
+
−
                        <div class="dropdown-menu">
+
−
                            <a class="dropdown-item" href="/Team:Tuebingen/Human_Practices" style="font-family: 'Righteous', cursive; font-weight: normal;">Integrated Human Practise</a>
+
−
                            <a class="dropdown-item" href="/Team:Tuebingen/Public_Engagement" style="font-family: 'Righteous', cursive; font-weight: normal;">Education & Public Engagement</a>
+
−
                            <a class="dropdown-item" href="/Team:Tuebingen/Entrepreneurship" style="font-family: 'Righteous', cursive; font-weight: normal;">Supporting Entrepreneurship</a>
+
−
                            <a class="dropdown-item" href="/Team:Tuebingen/Measurement" style="font-family: 'Righteous', cursive; font-weight: normal;">Measurement</a>
+
−
                            <a class="dropdown-item" href="/Team:Tuebingen/Model" style="font-family: 'Righteous', cursive; font-weight: normal;">Model</a>
+
−
                            <a class="dropdown-item" href="/Team:Tuebingen/Software" style="font-family: 'Righteous', cursive; font-weight: normal;">Software</a>
+
−
                        </div>
+
−
                    </li>
+
  
−
                    <li class="nav-item mx-3">
+
        #PhactoryText {
−
                            <a class="nav-link" href="/Team:Tuebingen/Safety" style="font-family: 'Righteous', cursive; font-weight: normal;">SAFETY</a>
+
            font-size: 1.5rem;
−
                    </li>
+
        }
  
−
                    <li class="nav-item mx-3">
+
        .warningContent span {
−
                        <a class="nav-link" href="https://igem.org/2019_Judging_Form?team=Tuebingen" target="_blank" style="font-family: 'Righteous', cursive; font-weight: normal;">JUDGING
+
            font-size: 1.5rem;
−
                            FORM ⇗</a>
+
        }
−
                    </li>
+
  
−
                    <li class="nav-item mx-1 pt-2">
+
        @media screen and (max-width: 500px) {
−
                        <a href="https://www.facebook.com/igemtuebingen/" class="fa fa-facebook" target="_blank"></a>
+
            .warningContent span {
−
                    </li>
+
                font-size: 1.5rem;
−
                    <li class="nav-item mx-1 pt-2">
+
            }
−
                        <a href="https://twitter.com/iGEMTuebingen" class="fa fa-twitter" target="_blank"></a>
+
        }
−
                    </li>
+
−
                    <li class="nav-item mx-1 pt-2">
+
−
                        <a href="https://www.instagram.com/igem_tuebingen/" class="fa fa-instagram" target="_blank"></a>
+
−
                    </li>
+
  
−
                </ul>
+
         #warnPics .qoutes {
−
            </div>
+
            font-size: 1rem;
−
         </nav>
+
        }
−
    </section>
+
−
<script>
+
−
var url = window.location.href;
+
−
$(function () {
+
−
$('.nav-link[href="' + url + '"]').addClass("active");
+
−
$('.dropdown-item[href="' + url + '"]').addClass("active");
+
−
$('.dropdown-item[href="' + url + '"]').parent().parent().addClass("active");
+
−
});
+
−
</script>
+
−
<script src="https://2019.igem.org/Team:Tuebingen/jqueryminjs?action=raw&ctype=text/javascript"></script>
+
−
<script src="https://2019.igem.org/Team:Tuebingen/popperjs?action=raw&ctype=text/javascript"></script>
+
−
<script src="https://2019.igem.org/Team:Tuebingen/bootstrapjs?action=raw&ctype=text/javascript"></script>
+
−
<script src="https://2019.igem.org/Template:Tuebingen/GLPexeJS?action=raw&ctype=text/javascript"></script>
+
−
</body>
+
−
<style>
+
  
−
    .pictureTitle {
+
        #compareBox img {
−
        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");
+
            max-height: 20vh;
−
        background-repeat: no-repeat;
+
            width: auto;
−
         background-size: cover;
+
         }
−
        background-position: center;
+
−
    }
+
  
 +
        .mobileTitle {
 +
            font-size: 3rem !important;
 +
        }
  
−
    @media only screen and (max-width: 575.98px) {
+
        @media screen and (max-width: 450px) {
−
    }
+
            .mobileTitle {
 +
                font-size: 2.0rem !important;
 +
            }
 +
        }
  
−
    @media only screen and (max-width: 767.98px) {
+
        #conceptFlowTitle {
−
    }
+
            font-size: 2rem;
 +
            font-weight: bold;
 +
        }
  
−
    @media only screen and (max-width: 991.98px) {
+
        #conceptFlow h5 {
−
    }
+
            font-size: 1.5rem;
 +
        }
  
−
    @media only screen and (max-width: 1199.98px) {
+
        #conceptFlow span {
−
    }
+
            font-size: 1rem;
 +
        }
  
−
    /*
+
        .how-it-works.row {
−
========================
+
            height: auto;
−
    BUTTON STYLE BEGIN
+
        }
−
========================
+
−
*/
+
  
−
.btn-link {
+
        /* FlowChart*/
−
        font-weight: 400;
+
        .circleO {
−
        color: #007bff;
+
            height: 40px;
−
         background-color: transparent
+
            width: 40px;
−
    }
+
         }
  
−
    .btn-link:hover {
+
        .circleO img {
−
        color: #0056b3;
+
            max-height: 25px;
−
        text-decoration: underline;
+
            width: auto;
−
        background-color: transparent;
+
         }
−
         border-color: transparent
+
−
    }
+
  
−
    .btn-link.focus, .btn-link:focus {
+
        .circleS {
−
        text-decoration: underline;
+
            height: 40px;
−
        border-color: transparent;
+
            width: 40px;
−
         box-shadow: none
+
         }
−
    }
+
  
−
    .btn-link.disabled, .btn-link:disabled {
+
        .circleS img {
−
        color: #6c757d;
+
            max-height: 25px;
−
         pointer-events: none
+
            width: auto;
−
    }
+
         }
  
−
    .btn-link{
+
        .circleM {
−
opacity: 0.8;
+
            height: 50px;
−
text-decoration: none;
+
            width: 50px;
−
color: white;
+
        }
−
}
+
−
.btn-link:hover{
+
−
opacity: 1;
+
−
text-decoration: none;
+
−
    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
+
−
========================
+
−
*/
+
  
−
    /*
+
        .circleM img {
−
========================
+
            max-height: 35px;
−
      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
+
−
========================
+
−
*/
+
  
−
    /*
+
        .circleL {
−
    ======================
+
            height: 60px;
−
    HEADER BANNER STYLE BEGIN
+
            width: 60px;
−
    ==========================
+
        }
−
    */
+
  
−
  .header{
+
        .circleL img {
−
  position:relative;
+
            max-height: 45px;
−
  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{
+
−
  content:"";
+
−
  width:100%;
+
−
  height:100%;
+
−
  position:absolute;
+
−
  bottom:0;
+
−
  left:0;
+
−
  z-index:-1;
+
−
background: linear-gradient(to bottom, rgba(0,0,0,0.1) 40%,rgba(27,32,48,1) 100%);
+
−
}
+
−
.header:before{
+
−
  content:"";
+
−
  width:100%;
+
−
  height:100%;
+
−
  position:absolute;
+
−
  top:0;
+
−
  left:0;
+
−
    -webkit-backface-visibility: hidden;
+
−
    -webkit-transform: translateZ(0) scale(1.0, 1.0);
+
−
    transform: translateZ(0);
+
−
  background:#1B2030 url(https://2019.igem.org/File:T--Tuebingen--Model-banner.png) center no-repeat;
+
−
  background-size:100%,80%;
+
−
  animation: grow 60s  linear 10ms infinite;
+
−
  transition:all 0.2s ease-in-out;
+
−
  z-index:-2
+
−
}
+
−
.header a{
+
−
  color:#eee
+
−
}
+
  
−
.info{
+
        .reg {
−
  width:100%;
+
            padding: 0;
−
  padding:15% 10% 0 10%;
+
        }
−
  text-align:center;
+
−
  text-shadow:0 2px 3px rgba(0,0,0,0.2)
+
−
}
+
  
−
.info h4, .meta{
+
        .mobileText {
−
  font-size:0.7em
+
            font-size: 1rem !important;
−
}
+
            margin-top: 0;
−
 
+
        }
−
@media only screen and (max-width: 800px) {
+
−
.info h1 {
+
−
    margin-top: 15%;
+
−
    font-size: 1.7em;
+
−
    text-align: center;
+
−
}
+
−
}
+
  
−
@media only screen and (max-width: 660px) {
+
        .showCase .row {
−
    .info h1 {
+
            padding: 0;
−
        margin-top: 20%;
+
         }
−
         font-size: 1.5em;
+
 
     }
 
     }
−
}
 
  
−
@media only screen and (max-width: 560px) {
+
    @media only screen and (max-width: 991.98px) {
−
    .info h1 {
+
−
        margin-top: 25%;
+
 
     }
 
     }
−
}
 
  
−
@media only screen and (max-width: 470px) {
+
    @media only screen and (max-width: 1199.98px) {
−
    .info h1 {
+
−
        margin-top: 30%;
+
 
     }
 
     }
−
}
+
</style>
  
−
@keyframes grow{
+
<script>
−
  0% { transform:scale(1)}
+
    // Scroll Down Icon
−
  50% { transform:scale(1.2)}
+
    $(document).ready(function () {
−
}
+
        // Add smooth scrolling to all links
 +
        $("#goTo").on('click', function (event) {
  
−
/*  ======================
+
            // Make sure this.hash has a value before overriding default behavior
−
    HEADER BANNER STYLE END
+
            if (this.hash !== "") {
−
    ==========================
+
                // Prevent default anchor click behavior
−
    */
+
                event.preventDefault();
  
−
</style>
+
                // Store hash
 +
                var hash = this.hash;
 +
 
 +
                // 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 () {
 +
 
 +
                    // Add hash (#) to URL when done scrolling (default click behavior)
 +
                    window.location.hash = hash;
 +
                });
 +
            } // End if
 +
        });
 +
    });
 +
 
 +
 
 +
    $(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>
  
−
<!-- Header Banner Begin-->
 
−
<div class="header">
 
−
  <div class="info">
 
−
    <h1 style="font-family: 'Righteous', cursive; font-weight: normal;">GENERAL HEADER</h1>
 
−
  </div>
 
 
</div>
 
</div>
−
<!-- Header Banner End-->
 
  
−
<div class="glpContainer">
 
−
    <aside id="glpContentsOuter">
 
−
        <aside id="phaContents" class="table-of-contents">
 
−
            <!-- will be generated with JS -->
 
−
        </aside>
 
−
    </aside>
 
  
−
    <main class="post-content">
+
<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;">
−
        <h3>The Problem</h3>
+
    <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"
−
                    Antimicrobial resistance is on the rise and the death toll from bacterial infections will continue
+
        data-aos-easing="ease-in-out-cubic"
−
                    to increase if no alternative solutions are developed. The threat of antimicrobial resistance has
+
        data-aos-mirror="true"
−
                    been known for a long time - Alexander Fleming, the discoverer of penicillin, predicted in 1945 that
+
        data-aos-once="false">
−
                    “exposing […] microbes to nonlethal quantities of the drug makes them resistant”. Even though
+
         <div class="row pt-5 pb-3 ">
−
                    efforts for development of novel antimicrobial compounds have been stepped up in recent years, there
+
             <div class="warningContent col-12">
−
                    is still a lack of safe and effective substitutes for antibiotics<sup><a href="#glpreferences">1</a></sup>.
+
                 <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>
−
                    A promising alternative – phage therapy – has an extensive history of successful application in
+
            </div>
−
                    countries with limited access to antibiotics. Although phage therapy has been known for almost a
+
        </div>
−
                    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.
+
  
 +
        <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>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>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>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
+
−
                        addition and optimal DNA template concentration.
+
−
                    </p>
+
−
                </div>
+
−
            </div>
+
  
−
            <h2>Modular Phage Composition</h2>
+
        <div class="row p-5" style="padding-left: 10vw; padding-right: 10vw;">
−
            <div class="row">
+
            <div class="col-12 col-md-6">
−
                <div class="col-12">
+
                <img class="img-fluid"
−
                    <p>
+
                    src="https://2019.igem.org/wiki/images/e/e3/T--Tuebingen--Our-Probiotic-transparent-Landing-page.png"
−
                        When thinking about a release into the environment in the course of a therapeutic application,
+
                    alt="meetUp" style="padding-left: 6vw;">
−
                        it is important to avoid using genetically engineered phages. We postulated that in our cell
+
−
                        free system it should be possible to modify phages without altering their genome. In a modular
+
−
                        approach, we aimed at adding both natural phage DNA and engineered proteins to an assembly
+
−
                        reaction. To test our hypothesis, we chose to externally express an edited HOC (highly
+
−
                        immunogenic outer capsid) protein and incorporate it in the assembly reaction. Thinking about
+
−
                        the possible applications of fluorescent and bioluminescent phages in medical imaging, we
+
−
                        designed expression constructs encoding for YFP or the NanoLuc luciferase. Additionally, we
+
−
                        needed to consider first the isolation of the desired protein and then later the purification of
+
−
                        the phages out of a heterogeneous solution. Therefore, we added a histidine-tag.
+
−
                    </p>
+
−
                </div>
+
 
             </div>
 
             </div>
  
−
             <h2>Quality Control</h2>
+
             <div class="col-12 col-md-6 pt-3" style="padding-right: 6vw;">
 +
                <h2 class="display-4 mobileTitle" style="font-family: 'Righteous';color:#2ecc71;">There's a
 +
                    solution!</h2>
 +
                <p class="text-justify mobileText">Our therapeutic agent is a probiotic secreting incretin
 +
                    mimetics placed in the patients intestine by oral administration of capsules. GLP-1 and Exendin-4,
 +
                    our
 +
                    main actors, cause an increase in insulin secretion, if the cell has already taken up sugar.</p>
  
 +
                <p class="text-justify mobileText">This enables an easier therapy where a regular intake of
 +
                    medicals is not required.</p>
  
−
            <div class="row">
+
                 <p class="text-justify mobileText">Improved cell penetrating peptides with the use of
−
                 <div class="col-12">
+
                     artificial intelligence allow for an efficient and safe transport of our effectors into the
−
                     <p>
+
                    cells.</p>
−
                        Clinical applications require highly pure samples of functional bacteriophages, free of
+
−
                        bacterial endotoxins and contaminations. The purpose of this module is to implement quality
+
−
                        control mechanisms to ensure a safe and effective application.
+
−
                    </p>
+
−
                </div>
+
 
             </div>
 
             </div>
 +
        </div>
 +
    </div>
  
−
            <div class="row">
+
    <div class="row pt-5 pb-3 ">
−
                <div class="col-12">
+
        <div class="warningContent col-12">
−
                    <figure class="figure" id="image-popups">
+
            <span class="align-middle"
−
                        <a style="font-size: small"
+
                  style="font-family: 'Righteous';color:#2ecc71;font-size: 3rem !important;">Safety</span>
−
                          href="http://2018.igem.org/wiki/images/6/69/T--Munich--Design_Principles.png"
+
        </div>
−
                          data-effect="mfp-zoom-out"
+
    </div>
−
                          title="Our therapeutic agent is a probiotic secreting incretin mimetics placed in the patients intestine by oral administration of capsules.
+
−
                                            This enables an easier therapy where a regular intake of a medication is not required.">
+
−
                            <img src="http://2018.igem.org/wiki/images/6/69/T--Munich--Design_Principles.png"
+
−
                                class="figure-img img-fluid rounded"
+
−
                                alt="A generic square placeholder image with rounded corners in a figure."></a>
+
−
                    </figure>
+
−
                </div>
+
−
            </div>
+
−
            <div class="row">
+
−
                <div class="col-12">
+
−
                    <h3>Quantifying the Level of DNA Contamination</h3>
+
−
                    <p>
+
−
                        While gels and absorption can be used to detect the presence of the desired phage genomes, they
+
−
                        do not prove the absence of contaminating DNA. In fact, we found that more than 50% of isolated
+
−
                        phage genome purified from common <i>E. coli</i> phages using traditional protocols is instead
+
−
                        <i>E. coli</i> genomic DNA. To precisely quantify the amount of contamination, we used third
+
−
                        generation sequencing. Nanopore sequencing was chosen because of its affordability and small
+
−
                        size that makes the device highly portable. Its long-read lengths allows for unambiguous
+
−
                        identification of the source of contaminations.
+
−
                    </p>
+
−
                    <p>
+
−
                        As a submodule, we decided to construct a software suite called Sequ-Into that allows the user
+
−
                        to easily determine the amount of DNA contamination in the first few minutes of sequencing,
+
−
                        thereby providing access to this aspect of phage manufacturing without requiring specialized
+
−
                        knowledge in bioinformatics.
+
−
                    </p>
+
−
                </div>
+
−
            </div>
+
  
 +
    <div 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"
−
                        3D printed low-cost devices to overcome these challenges independently. The hardware was
+
                    src="https://2019.igem.org/wiki/images/6/6d/T--Tuebingen--Cas3-system-transparent-Landing-page.png"
−
                        designed to be compatible with existing laboratory equipment or open source solutions.
+
                    alt="meetUp" style="padding-left: 6vw;">
−
                    </p>
+
−
                </div>
+
 
             </div>
 
             </div>
−
            <div class="row">
 
−
                <div class="col-12">
 
−
                    <h3>Verifying the Function of the Phage Product</h3>
 
−
 
−
                    <p>
 
−
                        To assess the antimicrobial action of our phage product, we combined two methods. We chose a
 
−
                        plaque assay as a cheap and simple way to confirm the presence of functional phages and to
 
−
                        quantify the phage titer. Reproduction and transcriptional capability of our phages however
 
−
                        could be assessed by reverse transcriptase qPCR.
 
−
                    </p>
 
−
                    <h3>Reducing Toxin Levels</h3>
 
  
−
                    <p>
+
            <div class="col-12 col-md-6 pt-3" style="padding-right: 6vw;">
−
                        In an attempt to push our purity towards enabling intravenous administration, we decided to
+
                <h2 class="display-4 mobileTitle" style="font-family: 'Righteous';color:#2ecc71;">is our highest
−
                        perform fractionation in a pressure-driven size-exclusion filter system. Suitability of the
+
                     priority!</h2>
−
                        phage product for intravenous application could then be assessed with an additional endotoxin
+
                <p class="text-justify mobileText">Therefore, we developed a novel, Cas3 based kill-switch
−
                        test.
+
                    mechanism. The flexible system uses three regulators inspired by the human intestines: temperature,
−
                     </p>
+
                     availability of fatty acids in form of Acyl CoA and N-Acetyl-Glucosamin. </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">
 +
                    If the conditions of our regulatory system are no longer met, Cas3 will be degrading all genetic
 +
                    information.
 +
                 </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">
−
          <div class="row">
+
            <span class="align-middle" style="font-family: 'Righteous';color:#2ecc71;font-size: 3rem !important;">Additionally</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-left"
 +
        data-aos-offset="200"
 +
        data-aos-delay="50"
 +
        data-aos-duration="2000"
 +
        data-aos-easing="ease-in-out-cubic"
 +
        data-aos-mirror="true"
 +
        data-aos-once="false">
 +
 
 +
        <div class="row p-5" style="padding-left: 10vw; padding-right: 10vw;">
 +
            <div class="col-12 col-md-6">
 +
                <img class="img-fluid"
 +
                    src="https://2019.igem.org/wiki/images/a/a6/T--Tuebingen--EcN-Charakterisierung-transparent-Landing-page.png"
 +
                    alt="meetUp" style="padding-left: 6vw;">
 
             </div>
 
             </div>
  
 +
            <div class="col-12 col-md-6 pt-3" style="padding-right: 6vw;">
 +
                <h2 class="display-4 mobileTitle" style="overflow-x: visible; font-family: 'Righteous';color:#2ecc71;">
 +
                    An in depth <i>E. coli</i> Nissle characterization</h2>
 +
                <p class="text-justify mobileText">Despite the fact that <i>E. coli</i> Nissle is an already
 +
                    approved probiotic, it's surprisingly badly characterized.</p>
  
−
            <h2>Encapsulation</h2>
+
                 <p class="text-justify mobileText">
−
            <div class="row">
+
                     Hence, we provide the first metabolic model of <i>E. coli</i> Nissle and optimize it's growth for various
−
                 <div class="col-12">
+
                    growth media. Furthermore, we predicted the interaction and competition of <i>E. coli</i> Nissle with
−
                     <The goal of this module is to optimize the packaging of assembled phages to prepare them for
+
                    common competitors for various fluxes in the gut.
−
                        application to patients.>
+
                </p>
−
                        <p>
+
 
−
                            The transport within the body often poses problems for the activity and integrity of phages,
+
                <p class="text-justify mobileText">
−
                            which can be addressed by packaging of the phages in a protective layer<sup><a
+
                    Finally, we carried out a series of RNA-Seq experiments to assess the adaptions and reactions of E.
−
                                href="#phareferences">5</a></sup>. For oral application of our phage product, sufficient
+
                    coli
−
                            stability for gastric passage has to be guaranteed. The highly acidic environment, as well
+
                    Nissle to aerobic, as well as anaerobic occurring stress factors.
−
                            as the presence of proteases composed the major challenges. Our packaging method thus needed
+
                </p>
−
                            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 class="row pt-5 pb-3 ">
 +
        <div class="warningContent col-12 slide-in">
 +
            <span class="align-middle" style="font-family: 'Righteous';color:#2ecc71;font-size: 3rem !important;">Bringing it all together</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 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 id="glpreferences" class="row">
+
             <div class="col-12 col-md-6 pt-3" style="padding-right: 6vw;">
−
                <h3>References</h3>
+
                <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>
−
                    <ol>
+
−
                        <li><a href=https://www.nature.com/articles/ja2017124> Incentivising innovation in antibiotic
+
−
                            drug discovery and development: progress, challenges and next steps.</a></li>
+
−
                        <li id="ref_2"><a href=https://www.nature.com/articles/nrmicro3564> A century of the phage:
+
−
                            past, present and future.</a></li>
+
−
                        <li id="ref_3"><a
+
−
                                href=https://www.jove.com/video/50762/protocols-for-implementing-an-escherichia-coli-based-tx-tl-cell-free>
+
−
                            Protocols for Implementing an Escherichia coli Based TX-TL Cell-Free Expression System for
+
−
                            Synthetic Biology.</a></li>
+
−
                        <li id="ref_4"><a href=https://www.ncbi.nlm.nih.gov/pmc/articles/PMC2593567/>RecBCD Enzyme and
+
−
                            the Repair of Double-Stranded DNA Breaks.</a></li>
+
−
                        <li id="ref_5"><a
+
−
                                href=https://www.sciencedirect.com/science/article/pii/S000186861630392X#s0185>Malik, D.
+
−
                            J., Sokolov, I. J., Vinner, G. K., Mancuso, F., Cinquerrui, S., Vladisavljevic, G. T., …
+
−
                            Kirpichnikova, A. (2017). Formulation, stabilisation and encapsulation of bacteriophage for
+
−
                            phage therapy. Advances in Colloid and Interface Science, 249, 100–133. </a></li>
+
−
                        <li id="ref_6"><a href=hhttps://www.ncbi.nlm.nih.gov/pmc/articles/PMC5264180/>Colom, J.,
+
−
                            Cano-Sarabia, M., Otero, J., Aríñez-Soriano, J., Cortés, P., Maspoch, D., &amp; Llagostera,
+
−
                            M. (2017). Microencapsulation with alginate/CaCO3: A strategy for improved phage therapy.
+
−
                            Scientific Reports, 7, 41441. </a></li>
+
−
                        </li>
+
−
                     </ol>
+
−
                </div>
+
 
             </div>
 
             </div>
 +
        </div>
 +
    </div>
  
−
    </main>
 
 
</div>
 
</div>
−
<!-- BUTTON LINK ANIMATION: CAVE: THIS MAY NOT WORK IN ALL CONTAINERS / <div> etc!!!!!-->
+
 
 
<style>
 
<style>
−
    .wrapper{
 
−
  position: fixed; /* Change this for absolute positioning  */
 
−
  top: 50%;
 
−
  left: 50%;
 
−
  transform: translate(-50%, -50%);
 
−
}
 
  
−
.link_wrapper{
+
    .testclasse {
−
  position: relative;
+
        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;
 +
    }
  
−
.link_wrapper a{
+
    .babbelbubu .logo .kokosnusss {
−
  display: block;
+
        width: 120%;
−
  width: 250px;
+
        margin-left: -10%;
−
  height: 50px;
+
        margin-top: -45%;
−
  line-height: 50px;
+
        pointer-events: none;
−
  font-weight: bold;
+
        height: 90vh;
−
  text-decoration: none;
+
        top: 0;
−
  background: #333;
+
        bottom: 0;
−
  text-align: center;
+
        right: 0;
−
  color: #fff;
+
        left: 0;
−
  text-transform: uppercase;
+
        position: relative;
−
  letter-spacing: 1px;
+
        opacity: .6;
−
  border: 3px solid #333;
+
        z-index: 20;
−
  transition: all .35s;
+
        background-size: cover;
−
}
+
        background-position: center;
 +
        background-image: url("https://2019.igem.org/wiki/images/2/2a/T--Tuebingen--white_logo_animated.gif");
 +
    }
  
−
.icon{
+
    .babbelbubu {
−
  width: 50px;
+
        height: 80%;
−
  height: 50px;
+
        display: flex;
−
  border: 3px solid transparent;
+
        align-items: center;
−
  position: absolute;
+
        justify-content: center;
−
  transform: rotate(45deg);
+
    }
−
  right: 0;
+
−
  top: 0;
+
−
  z-index: -1;
+
−
  transition: all .35s;
+
−
}
+
  
−
.icon svg{
+
    .logo {
−
  width: 30px;
+
        cursor: pointer;
−
  position: absolute;
+
        text-align: center;
−
  top: calc(50% - 15px);
+
    }
−
  left: calc(50% - 15px);
+
−
  transform: rotate(-45deg);
+
−
  fill: #2ecc71;
+
−
  transition: all .35s;
+
−
}
+
  
−
.link_wrapper a:hover{
+
    .logo:hover .restart {
−
  width: 200px;
+
        opacity: .8;
−
  border: 3px solid #2ecc71;
+
    }
−
  background: transparent;
+
−
  color: #2ecc71;
+
−
}
+
  
−
.link_wrapper a:hover + .icon{
+
    .restart {
−
  border: 3px solid #2ecc71;
+
        color: #fff;
−
  right: -25%;
+
        margin-top: 20px;
−
}
+
        font-size: 1.5rem;
 +
        text-transform: uppercase;
 +
        letter-spacing: -.08rem;
 +
        transition: opacity 150ms linear;
 +
    }
  
−
@media only screen and (max-width: 767.98px) {
+
    .marvel, .studios {
 +
        position: relative;
 +
        color: #fff;
 +
        text-transform: uppercase;
 +
        letter-spacing: -.2rem;
 +
        font-size: 5rem;
 +
        margin: .05rem .05rem .5rem;
 +
        padding: 0 0.4rem;
 +
        display: inline-block;
 +
        margin-top: 30%;
 +
    }
  
−
.link_wrapper a{
+
    .studios {
−
  width: 100px;
+
        font-weight: 500;
−
  height: 20px;
+
        letter-spacing: -.3rem;
−
  line-height: 20px;
+
        -webkit-transform: translateX(-95px);
−
  font-weight: normal;
+
        transform: translateX(-95px);
−
    font-size:smaller;
+
     }
−
     letter-spacing: 0.05px;
+
−
}
+
  
−
.icon {
+
    .marvel {
−
    width: 20px;
+
        z-index: 10;
−
    height: 20px;
+
        font-weight: 800;
−
}
+
        -webkit-transform: translateX(95px);
 +
        transform: translateX(95px);
 +
    }
  
−
.icon svg {
+
    .marvel:before {
−
     width: 12px;
+
        z-index: -10;
−
     top: calc(50% - 6px);
+
        content: '';
−
     left: calc(50% - 6px);
+
        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");
 +
        }
 +
    }
  
−
.link_wrapper a:hover {
 
−
    width: 90px;
 
−
}
 
−
}
 
 
</style>
 
</style>
  
−
<div class="wrapper">
+
 
−
  <div class="link_wrapper">
+
<div class="testclasse">
−
    <a href="#">Hover Me!</a>
+
 
−
    <div class="icon">
+
    <div class="babbelbubu run-animation" id="ananananananas">
−
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 268.832 268.832">
+
        <div class="logo">
−
        <path d="M265.17 125.577l-80-80c-4.88-4.88-12.796-4.88-17.677 0-4.882 4.882-4.882 12.796 0 17.678l58.66 58.66H12.5c-6.903 0-12.5 5.598-12.5 12.5 0 6.903 5.597 12.5 12.5 12.5h213.654l-58.66 58.662c-4.88 4.882-4.88 12.796 0 17.678 2.44 2.44 5.64 3.66 8.84 3.66s6.398-1.22 8.84-3.66l79.997-80c4.883-4.882 4.883-12.796 0-17.678z"/>
+
 
−
      </svg>
+
            <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>
 
     </div>
−
  </div>
+
 
 +
 
 
</div>
 
</div>
−
<!-- BUTTON LINK ANIMATION: CAVE: THIS MAY NOT WORK IN ALL CONTAINERS / <div> etc!!!!! END-->
 
  
−
<script src="https://2019.igem.org/Team:Tuebingen/sidebarJS?action=raw&ctype=text/javascript"></script>
 
  
 +
<script>
 +
    element = document.getElementById("ananananananas");
  
−
</p><p>
+
    if (element) {
 +
        // reset the transition by...
 +
        element.addEventListener("mouseenter", function (e) {
 +
            e.preventDefault;
  
−
         <div class='container-fluid p-3' style="background-color: rgba(255, 255, 255, 0.3);">
+
            console.log('element', element.classList);
−
                <hr>
+
 
−
                <div class='row align-items-center'>
+
            // removing the class
−
                    <div class='col-6 col-md-2 sponsorLogo text-center'>
+
            element.classList.remove("run-animation");
−
                        <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"
+
            // triggering reflow
−
                                                                                      style="max-height: 80px;"></a>
+
            void element.offsetWidth;
−
                    </div>
+
 
−
                    <div class='col-6 col-md-2 sponsorLogo text-center'>
+
            // and re-adding the class
−
                        <a href="https://www.embl.de/" target="_blank2"><img class="img-fluid"
+
            element.classList.add("run-animation");
−
                                                                            src="https://2019.igem.org/wiki/images/c/c4/T--Tuebingen--embl_logo.png"
+
         }, false);
−
                                                                            style="max-height: 80px;"></a>
+
 
−
                    </div>
+
        element.addEventListener("click", function (e) {
−
                    <div class='col-6 col-md-2 sponsorLogo text-center'>
+
            e.preventDefault;
−
                        <a href="https://www.kohlbacherlab.org" target="_blank2"><img class="img-fluid"
+
 
−
                                                                                      src="https://2019.igem.org/wiki/images/9/99/T--Tuebingen--kohlbacher_logo.png"
+
            console.log('element', element.classList);
−
                                                                                      style="max-height: 80px;"></a>
+
 
−
                    </div>
+
            // removing the class
−
                    <div class='col-6 col-md-2 sponsorLogo text-center'>
+
            element.classList.remove("run-animation");
−
                        <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"
+
            // triggering reflow
−
                                                                                      style="max-height: 80px;"></a>
+
            void element.offsetWidth;
−
                      </div>
+
 
−
                    <div class='col-6 col-md-2 sponsorLogo text-center'>
+
            // and re-adding the class
−
                        <a href="https://www.experimenta.science/en/" target="_blank2"><img class="img-fluid"
+
            element.classList.add("run-animation");
−
                                                                                            src="https://2019.igem.org/wiki/images/e/eb/T--Tuebingen--Logo-Experimenta.png"
+
        }, false);
−
                                                                                            style="max-height: 80px;"></a>
+
    }
−
                     </div>
+
</script>
−
                    <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"
+
<div class='container-fluid p-3' style="background-color: #919191;">
−
                                                                                                src="https://2019.igem.org/wiki/images/d/d8/T--Tuebingen--zmbp_logo.png"
+
        <hr>
−
                                                                                                style="max-height: 80px;"></a>
+
        <div class='row align-items-center'>
−
                    </div>
+
            <div class='col-6 col-md-2 sponsorLogo text-center'>
 +
                <a href="https://www.stura-tuebingen.de/" target="_blank2"><img class="img-fluid"
 +
                                                                                src="https://2019.igem.org/wiki/images/1/10/T--Tuebingen--stura_logo.png"
 +
                                                                                style="max-height: 80px;"></a>
 +
            </div>
 +
         
 +
            <div class='col-6 col-md-2 sponsorLogo text-center'>
 +
                <a href="https://www.kohlbacherlab.org" target="_blank2"><img class="img-fluid"
 +
                                                                              src="https://2019.igem.org/wiki/images/9/99/T--Tuebingen--kohlbacher_logo.png"
 +
                                                                              style="max-height: 80px;"></a>
 +
            </div>
 +
            <div class='col-6 col-md-2 sponsorLogo text-center'>
 +
                <a href="https://www.dieter-schwarz-stiftung.de/homepage.html" target="_blank2"><img class="img-fluid"
 +
                                                                                                    src="https://2019.igem.org/wiki/images/8/86/T--Tuebingen--LogoDSS.png"
 +
                                                                                                    style="max-height: 80px;"></a>
 +
            </div>
 +
   
 +
            <div class='col-6 col-md-2 sponsorLogo text-center'>
 +
                     <a href="https://www.embl.de/" target="_blank2"><img class="img-fluid"
 +
                                                                        src="https://2019.igem.org/wiki/images/c/c4/T--Tuebingen--embl_logo.png"
 +
                                                                        style="max-height: 80px;"></a>
 
                 </div>
 
                 </div>
 +
   
 +
            <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'>
−
</p>
+
                <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>
 +
   
 +
        <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.