Loading menubar.....

Difference between revisions of "Team:Tuebingen/Software"

 
(7 intermediate revisions by 2 users not shown)
Line 4: Line 4:
  
 
<style>
 
<style>
        /* Paste this css to your style sheet file or under head tag */
+
    /* Paste this css to your style sheet file or under head tag */
        /* This only works with JavaScript,
+
    /* This only works with JavaScript,
        if it's not present, don't show loader */
+
    if it's not present, don't show loader */
        .js #loader {
+
    .js #loader {
            display: block;
+
        display: block;
            position: absolute;
+
        position: absolute;
            left: 100px;
+
        left: 100px;
            top: 0;
+
        top: 0;
        }
+
    }
  
        .se-pre-con {
+
    .se-pre-con {
            position: fixed;
+
        position: fixed;
            left: 0px;
+
        left: 0px;
            top: 0px;
+
        top: 0px;
            width: 100%;
+
        width: 100%;
            height: 100%;
+
        height: 100%;
            z-index: 9999;
+
        z-index: 9999;
            background: #2B2B35;
+
        background: #292935;
        }
+
    }
  
 +
    .se-pre-con img {
 +
        width: 40%;
 +
        height: 40%;
 +
        margin-left: 30%;
 +
        margin-top: 15%;
 +
    }
 +
 +
    @media screen and (min-width: 1500px ) {
 
         .se-pre-con img {
 
         .se-pre-con img {
             width: 40%;
+
             margin-top: 20%;
             height: 40%;
+
             width: 25%;
             margin-left: 30%;
+
             height: 15%;
             margin-top: 15%;
+
             margin-left: 35%;
 
         }
 
         }
 +
    }
  
        @media screen and (min-width: 1500px ) {
+
    @media screen and (max-width: 1100px ) {
            .se-pre-con img {
+
        .se-pre-con img {
                margin-top: 20%;
+
            margin-top: 20%;
                width: 25%;
+
            height: 30%;
                height: 15%;
+
            width: 50%;
                margin-left: 35%;
+
            margin-left: 25%;
            }
+
 
         }
 
         }
 +
    }
  
        @media screen and (max-width: 1100px ) {
+
    @media screen and (max-width: 700px ) {
            .se-pre-con img {
+
        .se-pre-con img {
                margin-top: 20%;
+
            margin-top: 18%;
                height: 30%;
+
            height: 20%;
                width: 50%;
+
                margin-left: 25%;
+
            }
+
 
         }
 
         }
 
+
    }
        @media screen and (max-width: 700px ) {
+
</style>
            .se-pre-con img {
+
                margin-top: 18%;
+
                height: 20%;
+
            }
+
        }
+
    </style>
+
 
</head>
 
</head>
 
<body>
 
<body>
 
<div class="se-pre-con">
 
<div class="se-pre-con">
     <img src="https://2019.igem.org/wiki/images/8/83/T--Tuebingen--preloader.gif">
+
     <img src="https://2019.igem.org/wiki/images/4/49/T--Tuebingen--DNA_gif.gif">
 
</div>
 
</div>
 
<script src="https://2019.igem.org/Team:Tuebingen/jqueryLoadJS?action=raw&ctype=text/javascript"></script>
 
<script src="https://2019.igem.org/Team:Tuebingen/jqueryLoadJS?action=raw&ctype=text/javascript"></script>
Line 431: Line 431:
 
     }
 
     }
  
     @media screen and (max-width: 500px){
+
     @media screen and (max-width: 500px) {
         h4{
+
         h4 {
 
             font-size: 1.0rem;
 
             font-size: 1.0rem;
 
         }
 
         }
Line 1,729: Line 1,729:
 
         background-color: transparent
 
         background-color: transparent
 
     }
 
     }
 +
 
     .veggie td,
 
     .veggie td,
 
     .veggie th {
 
     .veggie th {
Line 1,737: Line 1,738:
 
         border-bottom: 1px solid #F4F0DE;
 
         border-bottom: 1px solid #F4F0DE;
 
     }
 
     }
 +
 
     .veggie th {
 
     .veggie th {
 
         background-color: #2ecc71;
 
         background-color: #2ecc71;
 
         color: #232323 !important
 
         color: #232323 !important
 
     }
 
     }
 +
 
     .veggie caption {
 
     .veggie caption {
 
         color: #adb3b7;
 
         color: #adb3b7;
 
     }
 
     }
 +
 
     .veggie thead th {
 
     .veggie thead th {
 
         vertical-align: bottom;
 
         vertical-align: bottom;
 
         border-bottom: 2px solid #dee2e6
 
         border-bottom: 2px solid #dee2e6
 
     }
 
     }
     .veggie tbody+tbody {
+
 
 +
     .veggie tbody + tbody {
 
         border-top: 2px solid #dee2e6
 
         border-top: 2px solid #dee2e6
 
     }
 
     }
Line 2,489: Line 2,494:
 
     .btn.focus, .btn:focus {
 
     .btn.focus, .btn:focus {
 
         outline: 0;
 
         outline: 0;
         box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25)
+
         box-shadow: 0 0 0 .2rem #2ecc71;
 
     }
 
     }
  
Line 2,574: Line 2,579:
 
     .btn-success {
 
     .btn-success {
 
         color: #fff;
 
         color: #fff;
         background-color: #28a745;
+
         background-color: #2ecc71;
         border-color: #28a745
+
         border-color: #2ecc71
 
     }
 
     }
  
 
     .btn-success:hover {
 
     .btn-success:hover {
 
         color: #fff;
 
         color: #fff;
         background-color: #218838;
+
         background-color: #2ecc71;
         border-color: #1e7e34
+
         border-color: #2ecc71
 
     }
 
     }
  
 
     .btn-success.focus, .btn-success:focus {
 
     .btn-success.focus, .btn-success:focus {
         box-shadow: 0 0 0 .2rem rgba(40, 167, 69, .5)
+
         box-shadow: 0 0 0 .2rem #2ecc71
 
     }
 
     }
  
 
     .btn-success.disabled, .btn-success:disabled {
 
     .btn-success.disabled, .btn-success:disabled {
 
         color: #fff;
 
         color: #fff;
         background-color: #28a745;
+
         background-color: #2ecc71;
         border-color: #28a745
+
         border-color: #2ecc71
 
     }
 
     }
  
 
     .btn-success:not(:disabled):not(.disabled).active, .btn-success:not(:disabled):not(.disabled):active, .show > .btn-success.dropdown-toggle {
 
     .btn-success:not(:disabled):not(.disabled).active, .btn-success:not(:disabled):not(.disabled):active, .show > .btn-success.dropdown-toggle {
 
         color: #fff;
 
         color: #fff;
         background-color: #1e7e34;
+
         background-color: #2ecc71;
         border-color: #1c7430
+
         border-color: #2ecc71
 
     }
 
     }
  
 
     .btn-success:not(:disabled):not(.disabled).active:focus, .btn-success:not(:disabled):not(.disabled):active:focus, .show > .btn-success.dropdown-toggle:focus {
 
     .btn-success:not(:disabled):not(.disabled).active:focus, .btn-success:not(:disabled):not(.disabled):active:focus, .show > .btn-success.dropdown-toggle:focus {
         box-shadow: 0 0 0 .2rem rgba(40, 167, 69, .5)
+
         box-shadow: 0 0 0 .2rem #2ecc71
 
     }
 
     }
  
Line 6,075: Line 6,080:
  
 
     .bg-dark {
 
     .bg-dark {
         background-color: #343a40 !important
+
         background-color: #232323 !important
 
     }
 
     }
  
Line 9,165: Line 9,170:
 
     }
 
     }
  
    .judges-will-not-evaluate {
 
        border: 4px solid #e4dede;
 
        padding: 2% !important;
 
        width: 92% !important;
 
    }
 
  
 
     /* OWN Global Settings */
 
     /* OWN Global Settings */
Line 9,324: Line 9,324:
  
 
     .dropdown-menu {
 
     .dropdown-menu {
         background-color: rgba(100, 100, 100, 1);
+
         background-color: #232323;
 
     }
 
     }
  
Line 9,336: Line 9,336:
 
     }
 
     }
  
/*++++++++++++++++++++++++++++++++
+
    /*++++++++++++++++++++++++++++++++
contents CSS ++++++++++++++++++++++++++++++*/
+
    contents CSS ++++++++++++++++++++++++++++++*/
 
     * {
 
     * {
 
         box-sizing: border-box;
 
         box-sizing: border-box;
Line 9,409: Line 9,409:
 
     .post-content h2 {
 
     .post-content h2 {
 
         padding-top: 80px;
 
         padding-top: 80px;
 +
        color: #2ecc71;
 +
    }
 +
 +
    .post-content h4 {
 
         color: #2ecc71;
 
         color: #2ecc71;
 
     }
 
     }
Line 9,418: Line 9,422:
  
 
     #glpreferences a {
 
     #glpreferences a {
         color: #F4F0DE!important
+
         color: #F4F0DE !important
 
     }
 
     }
  
 
     ol li {
 
     ol li {
  counter-increment: list;
+
        counter-increment: list;
  list-style-type: none;
+
        list-style-type: none;
  position: relative;
+
        position: relative;
}
+
    }
/* Outout the numbers using the counter() function, but use a custom color, and position the numbers how we want */
+
 
 +
    /* Outout the numbers using the counter() function, but use a custom color, and position the numbers how we want */
 
     ol li:before {
 
     ol li:before {
  color: #F4F0DE;
+
        color: #F4F0DE;
  content: counter(list) ".";
+
        content: counter(list) ".";
  left:-32px;
+
        left: -32px;
  position: absolute;
+
        position: absolute;
  text-align: right;
+
        text-align: right;
  width: 26px;
+
        width: 26px;
}
+
    }
  
  
Line 9,772: Line 9,777:
 
     }
 
     }
 
</style>
 
</style>
    <head>
+
<head>
        <title>GLP.exe</title>
+
    <title>GLP.exe - Software</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" type="text/css" href="//fonts.googleapis.com/css?family=Righteous"/>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" type="text/css"/>
+
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"
        <style>
+
          type="text/css"/>
            .mfp-bg {
+
    <style>
                top: 0;
+
        .mfp-bg {
                left: 0;
+
            top: 0;
                width: 100%;
+
            left: 0;
                height: 100%;
+
            width: 100%;
                z-index: 1042;
+
            height: 100%;
                overflow: hidden;
+
            z-index: 1042;
                position: fixed;
+
            overflow: hidden;
                background: #0b0b0b;
+
            position: fixed;
                opacity: 0.8;
+
            background: #0b0b0b;
            }
+
            opacity: 0.8;
 +
        }
  
            .mfp-wrap {
+
        .mfp-wrap {
                top: 0;
+
            top: 0;
                left: 0;
+
            left: 0;
                width: 100%;
+
            width: 100%;
                height: 100%;
+
            height: 100%;
                z-index: 1043;
+
            z-index: 1043;
                position: fixed;
+
            position: fixed;
                outline: none !important;
+
            outline: none !important;
                -webkit-backface-visibility: hidden;
+
            -webkit-backface-visibility: hidden;
            }
+
        }
  
            .mfp-container {
+
        .mfp-container {
                text-align: center;
+
            text-align: center;
                position: absolute;
+
            position: absolute;
                width: 100%;
+
            width: 100%;
                height: 100%;
+
            height: 100%;
                left: 0;
+
            left: 0;
                top: 0;
+
            top: 0;
                padding: 0 8px;
+
            padding: 0 8px;
                box-sizing: border-box;
+
            box-sizing: border-box;
            }
+
        }
  
            .mfp-container:before {
+
        .mfp-container:before {
                content: '';
+
            content: '';
                display: inline-block;
+
            display: inline-block;
                height: 100%;
+
            height: 100%;
                vertical-align: middle;
+
            vertical-align: middle;
            }
+
        }
  
            .mfp-align-top .mfp-container:before {
+
        .mfp-align-top .mfp-container:before {
                display: none;
+
            display: none;
            }
+
        }
  
            .mfp-content {
+
        .mfp-content {
                position: relative;
+
            position: relative;
                display: inline-block;
+
            display: inline-block;
                vertical-align: middle;
+
            vertical-align: middle;
                margin: 0 auto;
+
            margin: 0 auto;
                text-align: left;
+
            text-align: left;
                z-index: 1045;
+
            z-index: 1045;
            }
+
        }
  
            .mfp-inline-holder .mfp-content,
+
        .mfp-inline-holder .mfp-content,
            .mfp-ajax-holder .mfp-content {
+
        .mfp-ajax-holder .mfp-content {
                width: 100%;
+
            width: 100%;
                cursor: auto;
+
            cursor: auto;
            }
+
        }
  
            .mfp-ajax-cur {
+
        .mfp-ajax-cur {
                cursor: progress;
+
            cursor: progress;
            }
+
        }
  
            .mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
+
        .mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
                cursor: -moz-zoom-out;
+
            cursor: -moz-zoom-out;
                cursor: -webkit-zoom-out;
+
            cursor: -webkit-zoom-out;
                cursor: zoom-out;
+
            cursor: zoom-out;
            }
+
        }
  
            .mfp-zoom {
+
        .mfp-zoom {
                cursor: pointer;
+
            cursor: pointer;
                cursor: -webkit-zoom-in;
+
            cursor: -webkit-zoom-in;
                cursor: -moz-zoom-in;
+
            cursor: -moz-zoom-in;
                cursor: zoom-in;
+
            cursor: zoom-in;
            }
+
        }
  
            .mfp-auto-cursor .mfp-content {
+
        .mfp-auto-cursor .mfp-content {
                cursor: auto;
+
            cursor: auto;
            }
+
        }
  
            .mfp-close,
+
        .mfp-close,
            .mfp-arrow,
+
        .mfp-arrow,
            .mfp-preloader,
+
        .mfp-preloader,
            .mfp-counter {
+
        .mfp-counter {
                -webkit-user-select: none;
+
            -webkit-user-select: none;
                -moz-user-select: none;
+
            -moz-user-select: none;
                user-select: none;
+
            user-select: none;
            }
+
        }
  
            .mfp-loading.mfp-figure {
+
        .mfp-loading.mfp-figure {
                display: none;
+
            display: none;
            }
+
        }
  
            .mfp-hide {
+
        .mfp-hide {
                display: none !important;
+
            display: none !important;
            }
+
        }
  
            .mfp-preloader {
+
        .mfp-preloader {
                color: #CCC;
+
            color: #CCC;
                position: absolute;
+
            position: absolute;
                top: 50%;
+
            top: 50%;
                width: auto;
+
            width: auto;
                text-align: center;
+
            text-align: center;
                margin-top: -0.8em;
+
            margin-top: -0.8em;
                left: 8px;
+
            left: 8px;
                right: 8px;
+
            right: 8px;
                z-index: 1044;
+
            z-index: 1044;
            }
+
        }
  
            .mfp-preloader a {
+
        .mfp-preloader a {
                color: #CCC;
+
            color: #CCC;
            }
+
        }
  
            .mfp-preloader a:hover {
+
        .mfp-preloader a:hover {
                color: #FFF;
+
            color: #FFF;
            }
+
        }
  
            .mfp-s-ready .mfp-preloader {
+
        .mfp-s-ready .mfp-preloader {
                display: none;
+
            display: none;
            }
+
        }
  
            .mfp-s-error .mfp-content {
+
        .mfp-s-error .mfp-content {
                display: none;
+
            display: none;
            }
+
        }
  
            button.mfp-close,
+
        button.mfp-close,
            button.mfp-arrow {
+
        button.mfp-arrow {
                overflow: visible;
+
            overflow: visible;
                cursor: pointer;
+
            cursor: pointer;
                background: transparent;
+
            background: transparent;
                border: 0;
+
            border: 0;
                -webkit-appearance: none;
+
            -webkit-appearance: none;
                display: block;
+
            display: block;
                outline: none;
+
            outline: none;
                padding: 0;
+
            padding: 0;
                z-index: 1046;
+
            z-index: 1046;
                box-shadow: none;
+
            box-shadow: none;
                touch-action: manipulation;
+
            touch-action: manipulation;
            }
+
        }
  
            button::-moz-focus-inner {
+
        button::-moz-focus-inner {
                padding: 0;
+
            padding: 0;
                border: 0;
+
            border: 0;
            }
+
        }
  
            .mfp-close {
+
        .mfp-close {
                width: 44px;
+
            width: 44px;
                height: 44px;
+
            height: 44px;
                line-height: 44px;
+
            line-height: 44px;
                position: absolute;
+
            position: absolute;
                right: 0;
+
            right: 0;
                top: 0;
+
            top: 0;
                text-decoration: none;
+
            text-decoration: none;
                text-align: center;
+
            text-align: center;
                opacity: 0.65;
+
            opacity: 0.65;
                padding: 0 0 18px 10px;
+
            padding: 0 0 18px 10px;
                color: #FFF;
+
            color: #FFF;
                font-style: normal;
+
            font-style: normal;
                font-size: 28px;
+
            font-size: 28px;
                font-family: Arial, Baskerville, monospace;
+
            font-family: Arial, Baskerville, monospace;
            }
+
        }
  
            .mfp-close:hover,
+
        .mfp-close:hover,
            .mfp-close:focus {
+
        .mfp-close:focus {
                opacity: 1;
+
            opacity: 1;
            }
+
        }
  
            .mfp-close:active {
+
        .mfp-close:active {
                top: 1px;
+
            top: 1px;
            }
+
        }
  
            .mfp-close-btn-in .mfp-close {
+
        .mfp-close-btn-in .mfp-close {
                color: #333;
+
            color: #333;
            }
+
        }
  
            .mfp-image-holder .mfp-close,
+
        .mfp-image-holder .mfp-close,
            .mfp-iframe-holder .mfp-close {
+
        .mfp-iframe-holder .mfp-close {
                color: #FFF;
+
            color: #FFF;
                right: -6px;
+
            right: -6px;
                text-align: right;
+
            text-align: right;
                padding-right: 6px;
+
            padding-right: 6px;
                width: 100%;
+
            width: 100%;
            }
+
        }
  
            .mfp-counter {
+
        .mfp-counter {
                position: absolute;
+
            position: absolute;
                top: 0;
+
            top: 0;
                right: 0;
+
            right: 0;
                color: #CCC;
+
            color: #CCC;
                font-size: 12px;
+
            font-size: 12px;
                line-height: 18px;
+
            line-height: 18px;
                white-space: nowrap;
+
            white-space: nowrap;
            }
+
        }
  
            .mfp-arrow {
+
        .mfp-arrow {
                position: absolute;
+
            position: absolute;
                opacity: 0.65;
+
            opacity: 0.65;
                margin: 0;
+
            margin: 0;
                top: 50%;
+
            top: 50%;
                margin-top: -55px;
+
            margin-top: -55px;
                padding: 0;
+
            padding: 0;
                width: 90px;
+
            width: 90px;
                height: 110px;
+
            height: 110px;
                -webkit-tap-highlight-color: transparent;
+
            -webkit-tap-highlight-color: transparent;
            }
+
        }
  
            .mfp-arrow:active {
+
        .mfp-arrow:active {
                margin-top: -54px;
+
            margin-top: -54px;
            }
+
        }
  
            .mfp-arrow:hover,
+
        .mfp-arrow:hover,
            .mfp-arrow:focus {
+
        .mfp-arrow:focus {
                opacity: 1;
+
            opacity: 1;
            }
+
        }
  
            .mfp-arrow:before,
+
        .mfp-arrow:before,
            .mfp-arrow:after {
+
        .mfp-arrow:after {
                content: '';
+
            content: '';
                display: block;
+
            display: block;
                width: 0;
+
            width: 0;
                height: 0;
+
            height: 0;
                position: absolute;
+
            position: absolute;
                left: 0;
+
            left: 0;
                top: 0;
+
            top: 0;
                margin-top: 35px;
+
            margin-top: 35px;
                margin-left: 35px;
+
            margin-left: 35px;
                border: medium inset transparent;
+
            border: medium inset transparent;
            }
+
        }
  
            .mfp-arrow:after {
+
        .mfp-arrow:after {
                border-top-width: 13px;
+
            border-top-width: 13px;
                border-bottom-width: 13px;
+
            border-bottom-width: 13px;
                top: 8px;
+
            top: 8px;
            }
+
        }
  
            .mfp-arrow:before {
+
        .mfp-arrow:before {
                border-top-width: 21px;
+
            border-top-width: 21px;
                border-bottom-width: 21px;
+
            border-bottom-width: 21px;
                opacity: 0.7;
+
            opacity: 0.7;
            }
+
        }
  
            .mfp-arrow-left {
+
        .mfp-arrow-left {
                left: 0;
+
            left: 0;
            }
+
        }
  
            .mfp-arrow-left:after {
+
        .mfp-arrow-left:after {
                border-right: 17px solid #FFF;
+
            border-right: 17px solid #FFF;
                margin-left: 31px;
+
            margin-left: 31px;
            }
+
        }
  
            .mfp-arrow-left:before {
+
        .mfp-arrow-left:before {
                margin-left: 25px;
+
            margin-left: 25px;
                border-right: 27px solid #3F3F3F;
+
            border-right: 27px solid #3F3F3F;
            }
+
        }
  
            .mfp-arrow-right {
+
        .mfp-arrow-right {
                right: 0;
+
            right: 0;
            }
+
        }
  
            .mfp-arrow-right:after {
+
        .mfp-arrow-right:after {
                border-left: 17px solid #FFF;
+
            border-left: 17px solid #FFF;
                margin-left: 39px;
+
            margin-left: 39px;
            }
+
        }
  
            .mfp-arrow-right:before {
+
        .mfp-arrow-right:before {
                border-left: 27px solid #3F3F3F;
+
            border-left: 27px solid #3F3F3F;
            }
+
        }
  
            .mfp-iframe-holder {
+
        .mfp-iframe-holder {
                padding-top: 40px;
+
            padding-top: 40px;
                padding-bottom: 40px;
+
            padding-bottom: 40px;
            }
+
        }
  
            .mfp-iframe-holder .mfp-content {
+
        .mfp-iframe-holder .mfp-content {
                line-height: 0;
+
            line-height: 0;
                width: 100%;
+
            width: 100%;
                max-width: 900px;
+
            max-width: 900px;
            }
+
        }
  
            .mfp-iframe-holder .mfp-close {
+
        .mfp-iframe-holder .mfp-close {
                top: -40px;
+
            top: -40px;
            }
+
        }
  
            .mfp-iframe-scaler {
+
        .mfp-iframe-scaler {
                width: 100%;
+
            width: 100%;
                height: 0;
+
            height: 0;
                overflow: hidden;
+
            overflow: hidden;
                padding-top: 56.25%;
+
            padding-top: 56.25%;
            }
+
        }
  
            .mfp-iframe-scaler iframe {
+
        .mfp-iframe-scaler iframe {
                position: absolute;
+
            position: absolute;
                display: block;
+
            display: block;
                top: 0;
+
            top: 0;
                left: 0;
+
            left: 0;
                width: 100%;
+
            width: 100%;
                height: 100%;
+
            height: 100%;
                box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
+
            box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
                background: #000;
+
            background: #000;
            }
+
        }
  
            /* Main image in popup */
+
        /* Main image in popup */
            img.mfp-img {
+
        img.mfp-img {
                width: auto;
+
            width: auto;
                max-width: 100%;
+
            max-width: 100%;
                height: auto;
+
            height: auto;
                display: block;
+
            display: block;
                line-height: 0;
+
            line-height: 0;
                box-sizing: border-box;
+
            box-sizing: border-box;
                padding: 40px 0 40px;
+
            padding: 40px 0 40px;
                margin: 0 auto;
+
            margin: 0 auto;
 +
        }
 +
 
 +
        /* The shadow behind the image */
 +
        .mfp-figure {
 +
            line-height: 0;
 +
        }
 +
 
 +
        .mfp-figure:after {
 +
            content: '';
 +
            position: absolute;
 +
            left: 0;
 +
            top: 40px;
 +
            bottom: 40px;
 +
            display: block;
 +
            right: 0;
 +
            width: auto;
 +
            height: auto;
 +
            z-index: -1;
 +
            box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
 +
            background: #444;
 +
        }
 +
 
 +
        .mfp-figure small {
 +
            color: #BDBDBD;
 +
            display: block;
 +
            font-size: 12px;
 +
            line-height: 14px;
 +
        }
 +
 
 +
        .mfp-figure figure {
 +
            margin: 0;
 +
        }
 +
 
 +
        .mfp-bottom-bar {
 +
            margin-top: -36px;
 +
            position: absolute;
 +
            top: 100%;
 +
            left: 0;
 +
            width: 100%;
 +
            cursor: auto;
 +
        }
 +
 
 +
        .mfp-title {
 +
            text-align: left;
 +
            line-height: 18px;
 +
            color: #F3F3F3;
 +
            word-wrap: break-word;
 +
            padding-right: 36px;
 +
        }
 +
 
 +
        .mfp-image-holder .mfp-content {
 +
            max-width: 100%;
 +
        }
 +
 
 +
        .mfp-gallery .mfp-image-holder .mfp-figure {
 +
            cursor: pointer;
 +
        }
 +
 
 +
        @media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
 +
            /**
 +
  * Remove all paddings around the image on small screen
 +
  */
 +
            .mfp-img-mobile .mfp-image-holder {
 +
                padding-left: 0;
 +
                padding-right: 0;
 
             }
 
             }
  
            /* The shadow behind the image */
+
             .mfp-img-mobile img.mfp-img {
             .mfp-figure {
+
                 padding: 0;
                 line-height: 0;
+
 
             }
 
             }
  
             .mfp-figure:after {
+
             .mfp-img-mobile .mfp-figure:after {
                 content: '';
+
                 top: 0;
                position: absolute;
+
                 bottom: 0;
                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 {
+
             .mfp-img-mobile .mfp-figure small {
                color: #BDBDBD;
+
                 display: inline;
                 display: block;
+
                 margin-left: 5px;
                font-size: 12px;
+
                 line-height: 14px;
+
 
             }
 
             }
  
             .mfp-figure figure {
+
             .mfp-img-mobile .mfp-bottom-bar {
 +
                background: rgba(0, 0, 0, 0.6);
 +
                bottom: 0;
 
                 margin: 0;
 
                 margin: 0;
 +
                top: auto;
 +
                padding: 3px 5px;
 +
                position: fixed;
 +
                box-sizing: border-box;
 
             }
 
             }
  
             .mfp-bottom-bar {
+
             .mfp-img-mobile .mfp-bottom-bar:empty {
                 margin-top: -36px;
+
                 padding: 0;
                position: absolute;
+
                top: 100%;
+
                left: 0;
+
                width: 100%;
+
                cursor: auto;
+
 
             }
 
             }
  
             .mfp-title {
+
             .mfp-img-mobile .mfp-counter {
                text-align: left;
+
                 right: 5px;
                line-height: 18px;
+
                 top: 3px;
                 color: #F3F3F3;
+
                 word-wrap: break-word;
+
                padding-right: 36px;
+
 
             }
 
             }
  
             .mfp-image-holder .mfp-content {
+
             .mfp-img-mobile .mfp-close {
                 max-width: 100%;
+
                 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;
 
             }
 
             }
 +
        }
  
             .mfp-gallery .mfp-image-holder .mfp-figure {
+
        @media all and (max-width: 900px) {
                 cursor: pointer;
+
             .mfp-arrow {
 +
                -webkit-transform: scale(0.75);
 +
                 transform: scale(0.75);
 
             }
 
             }
  
             @media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
+
             .mfp-arrow-left {
                /**
+
                 -webkit-transform-origin: 0;
      * Remove all paddings around the image on small screen
+
                 transform-origin: 0;
      */
+
                .mfp-img-mobile .mfp-image-holder {
+
                    padding-left: 0;
+
                    padding-right: 0;
+
                }
+
 
+
                .mfp-img-mobile img.mfp-img {
+
                    padding: 0;
+
                 }
+
 
+
                .mfp-img-mobile .mfp-figure:after {
+
                    top: 0;
+
                    bottom: 0;
+
                 }
+
 
+
                .mfp-img-mobile .mfp-figure small {
+
                    display: inline;
+
                    margin-left: 5px;
+
                }
+
 
+
                .mfp-img-mobile .mfp-bottom-bar {
+
                    background: rgba(0, 0, 0, 0.6);
+
                    bottom: 0;
+
                    margin: 0;
+
                    top: auto;
+
                    padding: 3px 5px;
+
                    position: fixed;
+
                    box-sizing: border-box;
+
                }
+
 
+
                .mfp-img-mobile .mfp-bottom-bar:empty {
+
                    padding: 0;
+
                }
+
 
+
                .mfp-img-mobile .mfp-counter {
+
                    right: 5px;
+
                    top: 3px;
+
                }
+
 
+
                .mfp-img-mobile .mfp-close {
+
                    top: 0;
+
                    right: 0;
+
                    width: 35px;
+
                    height: 35px;
+
                    line-height: 35px;
+
                    background: rgba(0, 0, 0, 0.6);
+
                    position: fixed;
+
                    text-align: center;
+
                    padding: 0;
+
                }
+
 
             }
 
             }
  
             @media all and (max-width: 900px) {
+
             .mfp-arrow-right {
                .mfp-arrow {
+
                 -webkit-transform-origin: 100%;
                    -webkit-transform: scale(0.75);
+
                transform-origin: 100%;
                    transform: scale(0.75);
+
                }
+
 
+
                .mfp-arrow-left {
+
                    -webkit-transform-origin: 0;
+
                    transform-origin: 0;
+
                 }
+
 
+
                .mfp-arrow-right {
+
                    -webkit-transform-origin: 100%;
+
                    transform-origin: 100%;
+
                }
+
 
+
                .mfp-container {
+
                    padding-left: 6px;
+
                    padding-right: 6px;
+
                }
+
 
             }
 
             }
  
             .mfp-zoom-out {
+
             .mfp-container {
                 /* start state */
+
                 padding-left: 6px;
                 /* animate in */
+
                 padding-right: 6px;
                /* animate out */
+
 
             }
 
             }
 +
        }
  
            .mfp-zoom-out .mfp-with-anim {
+
        .mfp-zoom-out {
                opacity: 0;
+
            /* start state */
                transition: all 0.3s ease-in-out;
+
            /* animate in */
                transform: scale(1.3);
+
            /* animate out */
            }
+
        }
  
            .mfp-zoom-out.mfp-bg {
+
        .mfp-zoom-out .mfp-with-anim {
                opacity: 0;
+
            opacity: 0;
                transition: all 0.3s ease-out;
+
            transition: all 0.3s ease-in-out;
             }
+
             transform: scale(1.3);
 +
        }
  
            .mfp-zoom-out.mfp-ready .mfp-with-anim {
+
        .mfp-zoom-out.mfp-bg {
                opacity: 1;
+
            opacity: 0;
                transform: scale(1);
+
            transition: all 0.3s ease-out;
            }
+
        }
  
            .mfp-zoom-out.mfp-ready.mfp-bg {
+
        .mfp-zoom-out.mfp-ready .mfp-with-anim {
                opacity: 0.8;
+
            opacity: 1;
             }
+
             transform: scale(1);
 +
        }
  
            .mfp-zoom-out.mfp-removing .mfp-with-anim {
+
        .mfp-zoom-out.mfp-ready.mfp-bg {
                transform: scale(1.3);
+
            opacity: 0.8;
                opacity: 0;
+
        }
            }
+
  
            .mfp-zoom-out.mfp-removing.mfp-bg {
+
        .mfp-zoom-out.mfp-removing .mfp-with-anim {
                opacity: 0;
+
            transform: scale(1.3);
            }
+
            opacity: 0;
        </style>
+
        }
  
     </head>
+
        .mfp-zoom-out.mfp-removing.mfp-bg {
 +
            opacity: 0;
 +
        }
 +
     </style>
 +
 
 +
</head>
  
 
<body style="">
 
<body style="">
  <section id="nav-placeholder">
+
<nav class="shadow navbar navbar-expand-md navbar-dark fixed-top"
    <nav class="shadow navbar navbar-expand-md navbar-dark fixed-top"
+
    style="background-color: rgba(30, 30, 30, 0.3); z-index: 100;">
        style="background-color: rgba(30, 30, 30, 0.3); z-index: 100;">
+
    <a class="navbar-brand" href="https://2019.igem.org/Team:Tuebingen">
        <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"
            <img src="https://2019.igem.org/wiki/images/2/2a/T--Tuebingen--white_logo_animated.gif" alt="logo"
+
            style="width:70px;">
                style="width:70px;">
+
        <h5 class="d-inline ml-3" style="font-family: 'Righteous', cursive; font-weight: normal;">GLP.exe</h5>
            <h5 class="d-inline ml-3" style="font-family: 'Righteous', cursive; font-weight: normal;">GLP.exe</h5>
+
    </a>
        </a>
+
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
+
        <span class="navbar-toggler-icon"></span>
            <span class="navbar-toggler-icon"></span>
+
    </button>
        </button>
+
    <div class="collapse navbar-collapse justify-content-around" id="collapsibleNavbar">
        <div class="collapse navbar-collapse justify-content-around" id="collapsibleNavbar">
+
        <ul class="navbar-nav">
            <ul class="navbar-nav">
+
            <li id="ourStoryButton" class="nav-item mx-3">
                <li id="ourStoryButton" class="nav-item mx-3">
+
                <a class="nav-link" href="/Team:Tuebingen/Story"
                    <a class="nav-link" href="/Team:Tuebingen/Story"
+
                  style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">OUR
                      style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">OUR STORY</a>
+
                    STORY</a>
                </li>
+
            </li>
  
                <li class="nav-item dropdown mx-3">
+
            <li class="nav-item dropdown mx-3">
                    <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"
+
                <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"
                      style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">
+
                  style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">
                        PROJECT
+
                    PROJECT
                    </a>
+
                </a>
                    <div class="dropdown-menu">
+
                <div class="dropdown-menu">
                        <a class="dropdown-item" href="/Team:Tuebingen/Description"
+
                    <a class="dropdown-item" href="/Team:Tuebingen/Description"
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Description</a>
+
                      style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Description</a>
                        <a class="dropdown-item" href="/Team:Tuebingen/Killswitch"
+
                    <a class="dropdown-item" href="/Team:Tuebingen/Killswitch"
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Kill Switch</a>
+
                      style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Kill Switch</a>
                        <a class="dropdown-item" href="/Team:Tuebingen/Nissle"
+
                    <a class="dropdown-item" href="/Team:Tuebingen/Nissle"
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Nissle</a>
+
                      style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Nissle</a>
                        <a class="dropdown-item" href="/Team:Tuebingen/Incretin"
+
                    <a class="dropdown-item" href="/Team:Tuebingen/Incretin"
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Incretin</a>
+
                      style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Incretin</a>
                        <a class="dropdown-item" href="/Team:Tuebingen/CPP"
+
                    <a class="dropdown-item" href="/Team:Tuebingen/Model"
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Cell Penetrating Peptides</a>
+
                      style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Model</a>
                        <a class="dropdown-item" href="/Team:Tuebingen/Results"
+
                    <a class="dropdown-item" href="/Team:Tuebingen/Software"
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Results</a>
+
                      style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Software</a>
                        <a class="dropdown-item" href="/Team:Tuebingen/Demonstrate"
+
                    <a class="dropdown-item" href="/Team:Tuebingen/Results"
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Demonstrate</a>
+
                      style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Results</a>
                        <a class="dropdown-item" href="/Team:Tuebingen/Notebook"
+
                    <a class="dropdown-item" href="/Team:Tuebingen/Demonstrate"
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Notebook</a>
+
                      style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Demonstrate</a>
                        <a class="dropdown-item" href="/Team:Tuebingen/Model"
+
                    <a class="dropdown-item" href="/Team:Tuebingen/Notebook"
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Model</a>
+
                      style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Notebook</a>
                        <a class="dropdown-item" href="/Team:Tuebingen/Software"
+
                    <a class="dropdown-item" href="/Team:Tuebingen/Outlook"
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Software</a>
+
                      style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Outlook</a>
                        <a class="dropdown-item" href="/Team:Tuebingen/Outlook"
+
                    <a class="dropdown-item" href="/Team:Tuebingen/Entrepreneurship"
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Outlook</a>
+
                      style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Entrepreneurship</a>
                    </div>
+
                </div>
                </li>
+
            </li>
                <li class="nav-item dropdown mx-3">
+
            <li class="nav-item dropdown mx-3">
                    <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"
+
                <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"
                      style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">
+
                  style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">
                        PARTS
+
                    PARTS
                    </a>
+
                </a>
                    <div class="dropdown-menu">
+
                <div class="dropdown-menu">
                        <a class="dropdown-item" href="/Team:Tuebingen/Parts"
+
                    <a class="dropdown-item" href="/Team:Tuebingen/Parts"
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Parts Overview</a>
+
                      style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Parts
                        <a class="dropdown-item" href="/Team:Tuebingen/Basic_Part"
+
                        Overview</a>
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Basic Parts</a>
+
                    <a class="dropdown-item" href="/Team:Tuebingen/Basic_Part"
                        <a class="dropdown-item" href="/Team:Tuebingen/Improved_Part"
+
                      style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Basic
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Improved Parts</a>
+
                        Parts</a>
                         <a class="dropdown-item" href="/Team:Tuebingen/Composite_Part"
+
                    <a class="dropdown-item" href="/Team:Tuebingen/Improved_Part"
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Composite Parts</a>
+
                      style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Improved
                        <a class="dropdown-item" href="/Team:Tuebingen/Part_Collection"
+
                        Parts</a>
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Part Collection</a>
+
                    <a class="dropdown-item" href="/Team:Tuebingen/Characterized_Part"
                     </div>
+
                      style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Characterized
                 </li>
+
                         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>
  
                <li class="nav-item dropdown mx-3">
+
            <li class="nav-item dropdown mx-3">
                    <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"
+
                <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"
                      style="font-family: 'Righteous', cursive; font-weight: normal;color: #2ecc71;">
+
                  style="font-family: 'Righteous', cursive; font-weight: normal;color: #2ecc71;">
                        PEOPLE
+
                    PEOPLE
                    </a>
+
                </a>
                    <div class="dropdown-menu">
+
                <div class="dropdown-menu">
                        <a class="dropdown-item" href="/Team:Tuebingen/Team"
+
                    <a class="dropdown-item" href="/Team:Tuebingen/Team"
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Team</a>
+
                      style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Team</a>
                        <a class="dropdown-item" href="/Team:Tuebingen/Collaborations"
+
                    <a class="dropdown-item" href="/Team:Tuebingen/Collaborations"
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Collaborations</a>
+
                      style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Collaborations</a>
                        <a class="dropdown-item" href="/Team:Tuebingen/Attributions"
+
                    <a class="dropdown-item" href="/Team:Tuebingen/Sponsors"
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Attributions</a>
+
                      style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Sponsors</a>
                        <a class="dropdown-item" href="/Team:Tuebingen/Sponsors"
+
                    <a class="dropdown-item" href="/Team:Tuebingen/Attributions"
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Sponsors</a>
+
                      style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Attributions</a>
                        <a class="dropdown-item" href="/Team:Tuebingen/Gallery"
+
                    <a class="dropdown-item" href="/Team:Tuebingen/Gallery"
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Gallery</a>
+
                      style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Gallery</a>
                    </div>
+
                </div>
                </li>
+
            </li>
  
                <li class="nav-item dropdown mx-3">
+
            <li class="nav-item dropdown mx-3">
                    <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"
+
                <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"
                      style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">
+
                  style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">
                        HUMAN PRACTICES
+
                    HUMAN PRACTICES
                    </a>
+
                </a>
                    <div class="dropdown-menu">
+
                <div class="dropdown-menu">
                        <a class="dropdown-item" href="/Team:Tuebingen/Human_Practices"
+
                    <a class="dropdown-item" href="/Team:Tuebingen/Human_Practices"
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Overview</a>
+
                      style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Overview</a>
                        <a class="dropdown-item" href="/Team:Tuebingen/Public_Engagement"
+
                    <a class="dropdown-item" href="/Team:Tuebingen/Public_Engagement"
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Education & Public
+
                      style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Education &
                            Engagement</a>
+
                        Public Engagement</a>
                        <a class="dropdown-item" href="/Team:Tuebingen/Experts"
+
                    <a class="dropdown-item" href="/Team:Tuebingen/Experts"
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Experts</a>
+
                      style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Experts</a>
                        <a class="dropdown-item" href="/Team:Tuebingen/Entrepreneurship"
+
                    <a class="dropdown-item" href="/Team:Tuebingen/SDG"
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Entrepreneurship</a>
+
                      style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Sustainable
                        <a class="dropdown-item" href="/Team:Tuebingen/SDG"
+
                        Development Goals</a>
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Sustainable Development
+
                    <a class="dropdown-item" href="/Team:Tuebingen/Experimenta"
                            Goals</a>
+
                      style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Experimenta
                        <a class="dropdown-item" href="/Team:Tuebingen/Experimenta"
+
                        Science Center</a>
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Experimenta Science
+
                    <a class="dropdown-item" href="/Team:Tuebingen/Survey"
                            Center</a>
+
                      style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Survey</a>
                    </div>
+
                </div>
                </li>
+
            </li>
                <li class="nav-item dropdown mx-3">
+
            <li class="nav-item dropdown mx-3">
                    <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"
+
                <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"
                      style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">
+
                  style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">
                        AWARDS
+
                    AWARDS
                    </a>
+
                </a>
                    <div class="dropdown-menu">
+
                <div class="dropdown-menu">
                        <a class="dropdown-item" href="/Team:Tuebingen/Human_Practices"
+
                    <a class="dropdown-item" href="/Team:Tuebingen/Human_Practices"
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Integrated Human Practise</a>
+
                      style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Integrated Human
                        <a class="dropdown-item" href="/Team:Tuebingen/Public_Engagement"
+
                        Practise</a>
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Education & Public
+
                    <a class="dropdown-item" href="/Team:Tuebingen/Public_Engagement"
                            Engagement</a>
+
                      style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Education &
                        <a class="dropdown-item" href="/Team:Tuebingen/Entrepreneurship"
+
                        Public Engagement</a>
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Supporting
+
                    <a class="dropdown-item" href="/Team:Tuebingen/Entrepreneurship"
                            Entrepreneurship</a>
+
                      style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Supporting
                        <a class="dropdown-item" href="/Team:Tuebingen/Measurement"
+
                        Entrepreneurship</a>
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Measurement</a>
+
                    <a class="dropdown-item" href="/Team:Tuebingen/Model"
                        <a class="dropdown-item" href="/Team:Tuebingen/Model"
+
                      style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Model</a>
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Model</a>
+
                    <a class="dropdown-item" href="/Team:Tuebingen/Software"
                        <a class="dropdown-item" href="/Team:Tuebingen/Software"
+
                      style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Software</a>
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Software</a>
+
                </div>
                    </div>
+
            </li>
                </li>
+
  
                <li class="nav-item mx-3">
+
            <li class="nav-item mx-3">
                    <a class="nav-link" href="/Team:Tuebingen/Safety"
+
                <a class="nav-link" href="/Team:Tuebingen/Safety"
                      style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">SAFETY</a>
+
                  style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">SAFETY</a>
                </li>
+
            </li>
  
                <li class="nav-item mx-3">
+
            <li class="nav-item mx-3">
                    <a class="nav-link" href="https://igem.org/2019_Judging_Form?team=Tuebingen" target="_blank"
+
                <a class="nav-link" href="https://igem.org/2019_Judging_Form?team=Tuebingen" target="_blank"
                      style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">JUDGING
+
                  style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">JUDGING FORM ⇗</a>
                        FORM ⇗</a>
+
            </li>
                </li>
+
  
                <li class="nav-item mx-1 pt-2">
+
            <li class="nav-item mx-1 pt-2">
                    <a href="https://www.facebook.com/igemtuebingen/" class="fa fa-facebook" target="_blank"></a>
+
                <a href="https://www.facebook.com/igemtuebingen/" class="fa fa-facebook" target="_blank"></a>
                </li>
+
            </li>
                <li class="nav-item mx-1 pt-2">
+
            <li class="nav-item mx-1 pt-2">
                    <a href="https://twitter.com/iGEMTuebingen" class="fa fa-twitter" target="_blank"></a>
+
                <a href="https://twitter.com/iGEMTuebingen" class="fa fa-twitter" target="_blank"></a>
                </li>
+
            </li>
                <li class="nav-item mx-1 pt-2">
+
            <li class="nav-item mx-1 pt-2">
                    <a href="https://www.instagram.com/igem_tuebingen/" class="fa fa-instagram" target="_blank"></a>
+
                <a href="https://www.instagram.com/igem_tuebingen/" class="fa fa-instagram" target="_blank"></a>
                </li>
+
            </li>
  
            </ul>
+
        </ul>
        </div>
+
    </div>
    </nav>
+
</nav>
 
</section>
 
</section>
 
<script>
 
<script>
Line 10,465: Line 10,479:
 
*/
 
*/
  
.btn-link {
+
    .btn-link {
 
         font-weight: 400;
 
         font-weight: 400;
 
         color: #007bff;
 
         color: #007bff;
Line 10,489: Line 10,503:
 
     }
 
     }
  
     .btn-link{
+
     .btn-link {
opacity: 0.8;
+
        opacity: 0.8;
text-decoration: none;
+
        text-decoration: none;
color: white;
+
        color: white;
}
+
    }
.btn-link:hover{
+
 
opacity: 1;
+
    .btn-link:hover {
text-decoration: none;
+
        opacity: 1;
    color: rgba(105, 202, 98, 1.1);
+
        text-decoration: none;
}
+
        color: #2ecc71;
.btn-link:focus{
+
    }
opacity: 1;
+
 
text-decoration: none;
+
    .btn-link:focus {
    color: rgba(105, 202, 98, 1.1);
+
        opacity: 1;
}
+
        text-decoration: none;
.card-header{
+
        color: #2ecc71;
background-color: rgba(50,50,50,1);
+
    }
}
+
 
.card button{
+
    .card-header {
width: 100%;
+
        background-color: rgba(50, 50, 50, 1);
font-size: 1.5rem;
+
    }
}
+
 
 +
    .card button {
 +
        width: 100%;
 +
        font-size: 1.5rem;
 +
    }
 +
 
 
     /*
 
     /*
 
========================
 
========================
Line 10,522: Line 10,541:
 
========================
 
========================
 
*/
 
*/
.btn-one {
+
    .btn-one {
color: rgba(105, 202, 98, 1.1);
+
        color: #2ecc71;
transition: all 0.3s;
+
        transition: all 0.3s;
position: relative;
+
        position: relative;
}
+
    }
.btn-one span {
+
 
transition: all 0.3s;
+
    .btn-one span {
}
+
        transition: all 0.3s;
.btn-one::before {
+
    }
content: '';
+
 
position: absolute;
+
    .btn-one::before {
bottom: 0;
+
        content: '';
left: 0;
+
        position: absolute;
width: 100%;
+
        bottom: 0;
height: 100%;
+
        left: 0;
z-index: 1;
+
        width: 100%;
opacity: 0;
+
        height: 100%;
transition: all 0.3s;
+
        z-index: 1;
border-top-width: 1px;
+
        opacity: 0;
border-bottom-width: 1px;
+
        transition: all 0.3s;
border-top-style: solid;
+
        border-top-width: 1px;
border-bottom-style: solid;
+
        border-bottom-width: 1px;
border-top-color: rgba(105, 202, 98, 1.1);
+
        border-top-style: solid;
border-bottom-color: rgba(105, 202, 98, 1.1);
+
        border-bottom-style: solid;
transform: scale(0.1, 1);
+
        border-top-color: #2ecc71;
}
+
        border-bottom-color: #2ecc71;
.btn-one:hover span {
+
        transform: scale(0.1, 1);
letter-spacing: 2px;
+
    }
}
+
 
.btn-one:hover::before {
+
    .btn-one:hover span {
opacity: 1;
+
        letter-spacing: 2px;
transform: scale(1, 1);
+
    }
}
+
 
.btn-one::after {
+
    .btn-one:hover::before {
content: '';
+
        opacity: 1;
position: absolute;
+
        transform: scale(1, 1);
bottom: 0;
+
    }
left: 0;
+
 
width: 100%;
+
    .btn-one::after {
height: 100%;
+
        content: '';
z-index: 1;
+
        position: absolute;
transition: all 0.3s;
+
        bottom: 0;
background-color: rgba(255,255,255,0.05);
+
        left: 0;
}
+
        width: 100%;
.btn-one:hover::after {
+
        height: 100%;
opacity: 0;
+
        z-index: 1;
transform: scale(0.1, 1);}
+
        transition: all 0.3s;
 +
        background-color: rgba(255, 255, 255, 0.05);
 +
    }
 +
 
 +
    .btn-one:hover::after {
 +
        opacity: 0;
 +
        transform: scale(0.1, 1);
 +
    }
 +
 
 
     /*
 
     /*
 
========================
 
========================
Line 10,634: Line 10,661:
 
     }
 
     }
  
     .info h1{
+
     .info h1 {
         font-size:3.0em;
+
         font-size: 3.0em;
 
     }
 
     }
  
Line 10,679: Line 10,706:
  
 
         .header {
 
         .header {
             height:40vh
+
             height: 40vh
 
         }
 
         }
 
     }
 
     }
Line 10,685: Line 10,712:
 
     @media only screen and (max-width: 600px) {
 
     @media only screen and (max-width: 600px) {
 
         .header {
 
         .header {
             height:35vh
+
             height: 35vh
 
         }
 
         }
 
     }
 
     }
Line 10,701: Line 10,728:
 
         }
 
         }
 
     }
 
     }
 +
 
     @media only screen and (max-width: 345px) {
 
     @media only screen and (max-width: 345px) {
 
         .info h1 {
 
         .info h1 {
Line 10,721: Line 10,749:
 
         ==========================
 
         ==========================
 
         */
 
         */
 +
    .vegan {
 +
        display: block;
 +
        margin-left: auto;
 +
        margin-right: auto;
 +
        width: 70%;
 +
    }
  
 
</style>
 
</style>
Line 10,726: Line 10,760:
 
<!-- Header Banner Begin-->
 
<!-- Header Banner Begin-->
 
<div class="header">
 
<div class="header">
  <div class="info">
+
    <div class="info">
    <h1 style="font-family: 'Righteous', cursive; font-weight: normal; color:#2ecc71;">Software</h1>
+
        <h1 style="font-family: 'Righteous', cursive; font-weight: normal; color:#2ecc71;">Software</h1>
  </div>
+
    </div>
 
</div>
 
</div>
 
<!-- Header Banner End-->
 
<!-- Header Banner End-->
Line 10,735: Line 10,769:
 
<div style="background-color: #232323; overflow-x: fragments; overflow-wrap: break-word">
 
<div style="background-color: #232323; overflow-x: fragments; overflow-wrap: break-word">
  
<div class="glpContainer">
+
    <div class="glpContainer">
    <aside id="glpContentsOuter" style="background-color: #232323">
+
        <aside id="glpContentsOuter" style="background-color: #232323">
        <aside id="phaContents" class="table-of-contents">
+
            <aside id="phaContents" class="table-of-contents">
            <!-- will be generated with JS -->
+
                <!-- will be generated with JS -->
 +
            </aside>
 
         </aside>
 
         </aside>
    </aside>
 
  
    <main class="post-content">
+
        <main class="post-content">
        <div id="image-popups">
+
            <div id="image-popups">
  
        <h2 style="font-family:'Righteous'; color:#2ecc71;">C3Pred - Cell-Penetrating Peptide Predictor</h2>
+
                <h2 style="font-family:'Righteous'; color:#2ecc71;">C3Pred - Cell-Penetrating Peptide Predictor</h2>
        <h3 style="font-family:'Righteous'; color:#2ecc71;">Our Software</h3>
+
 
        <div class="row">
+
                <div class="row">
            <div class="col-12">
+
                    <div class="col-12">
                <p>
+
                        <h3 style="font-family:'Righteous'; color:#2ecc71;">Our Software</h3>
                    <a href="https://igem-tuebingen.com/c3pred/" onclick='window.open("https://igem-tuebingen.com/c3pred/","_self");'>Live Version</a><br>
+
                        <p>
                    <a href="https://github.com/steffenlem/c3pred" onclick='window.open("https://github.com/steffenlem/c3pred","_self");'>Python package</a><br>
+
                        <ul style="color: #F4F0DE">
                    Web app: (TBA)
+
                            <li><a href="https://igem-tuebingen.com/c3pred/" style="color: #2ecc71"
                </p>
+
                                  onclick='window.open("https://igem-tuebingen.com/c3pred/","_self");'>Live Version</a>
                <p>
+
                            </li>
                    Cell-penetrating peptides (CPPs) are short 4-30 amino acids long peptides, which possess the
+
                            <li><a href="https://github.com/igemsoftware2019/Tuebingen_c3pred" style="color: #2ecc71"
                    ability to transport different cargo over the cell membrane. These cargos include proteins, nanobodies,
+
                                  onclick='window.open("https://github.com/igemsoftware2019/Tuebingen_c3pred","_self");'>Python
                    DNA molecules, and small molecule drugs. In recent years, numerous promising clinical and pre-clinical
+
                                Package Repository</a> and <a
                    trials have been launched, with CPPs as a carrier for pharmacologically active small molecules.
+
                                    href="https://github.com/igemsoftware2019/Tuebingen_c3pred" style="color: #2ecc71"
                </p>
+
                                    onclick='window.open("https://github.com/igemsoftware2019/Tuebingen_c3pred/releases","_self");'>Judging
                <p>
+
                                Release</a></li>
                    They can be classified into three general groups: cationic, amphipathic, and hydrophobic CPPs.
+
                            <li><a href="https://github.com/igemsoftware2019/Tuebingen_c3pred" style="color: #2ecc71"
                    Each group of peptides has different physical-chemical properties and therefore differs in the
+
                                  onclick='window.open("https://github.com/igemsoftware2019/Tuebingen_c3pred_webapp","_self");'>Webapp Repository
                    internalization mechanism. The pathways that CPPs exploit to enter the cell can be divided into two larger
+
                            </a> and <a href="https://github.com/igemsoftware2019/Tuebingen_c3pred" style="color: #2ecc71"
                    groups, endocytic pathways, and direct cell penetration [2, 3]. Since there are different, not yet fully
+
                                        onclick='window.open("https://github.com/igemsoftware2019/Tuebingen_c3pred_webapp/releases","_self");'>Judging
                    understood mechanisms involved, simple models, describing the relationship between sequence and function,
+
                                Release</a></li>
                    are particularly challenging to generate. Hence, the discovery of novel CPPs and activity optimization is
+
                        </ul>
                    mostly relying on large screening approaches.
+
                        </p>
                </p>
+
                        <p>
                <figure>
+
                            Cell-penetrating peptides (CPPs) are short 4-30 amino acids long peptides, which possess the
                        <a style="font-size: small"
+
                            ability to transport different cargo over the cell membrane. These cargos include proteins,
                          href="https://2019.igem.org/wiki/images/2/23/T--Tuebingen--CPP-function-transparent.png"
+
                            nanobodies,
                          data-effect="mfp-zoom-out"
+
                            DNA molecules, and small molecule drugs. In recent years, numerous promising clinical and
                          title="Fig.1">
+
                            pre-clinical
                            <img src="https://2019.igem.org/wiki/images/2/23/T--Tuebingen--CPP-function-transparent.png"
+
                            trials have been launched, with CPPs as a carrier for pharmacologically active small
                                class="figure-img img-fluid rounded"
+
                            molecules.
                                alt="A generic square placeholder"></a>
+
                        </p>
                             <figcaption style="font-size: small; color: #F4F0DE">Fig.1: Proteins can be fused to a cell-penetrating peptide (CPP)
+
                        <p>
 +
                            They can be classified into three general groups: cationic, amphipathic, and hydrophobic
 +
                            CPPs.
 +
                            Each group of peptides has different physical-chemical properties and therefore differs in
 +
                            the
 +
                            internalization mechanism. The pathways that CPPs exploit to enter the cell can be divided
 +
                            into two larger
 +
                            groups, endocytic pathways, and direct cell penetration [2, 3]. Since there are different,
 +
                            not yet fully
 +
                            understood mechanisms involved, simple models, describing the relationship between sequence
 +
                            and function,
 +
                            are particularly challenging to generate. Hence, the discovery of novel CPPs and activity
 +
                            optimization is
 +
                            mostly relying on large screening approaches.
 +
                        </p>
 +
                        <figure class="vegan">
 +
                            <a style="font-size: small"
 +
                              href="https://2019.igem.org/wiki/images/2/23/T--Tuebingen--CPP-function-transparent.png"
 +
                              data-effect="mfp-zoom-out"
 +
                              title="Fig.1">
 +
                                <img src="https://2019.igem.org/wiki/images/2/23/T--Tuebingen--CPP-function-transparent.png"
 +
                                    class="figure-img img-fluid rounded"
 +
                                    alt="A generic square placeholder"></a>
 +
                             <figcaption style="font-size: small; color: #F4F0DE">Figure 1: Proteins can be fused to a
 +
                                cell-penetrating peptide (CPP)
 
                                 (left). CPPs allow proteins to penetrate cells via different mechanisms and can
 
                                 (left). CPPs allow proteins to penetrate cells via different mechanisms and can
 
                                 be used to transport proteins into cells or through cells. Proteins without a
 
                                 be used to transport proteins into cells or through cells. Proteins without a
                                 CPP can normally not penetrate cells (right).</figcaption>
+
                                 CPP can normally not penetrate cells (right).
                    </figure>
+
                            </figcaption>
            </div>
+
                        </figure>
        </div>
+
                    </div>
 +
                </div>
  
            <h2 style="font-family:'Righteous'; color:#2ecc71;">Motivation</h2>
+
                <h2 style="font-family:'Righteous'; color:#2ecc71;">Motivation</h2>
            <div class="row">
+
                <div class="row">
                <div class="col-12">
+
                    <div class="col-12">
                    <p>
+
                        <p>
                        As part of our project, we planned to utilize cell-penetrating peptides (CPPs) to allow a cargo,
+
                            As part of our project, we planned to utilize cell-penetrating peptides (CPPs) to allow a
                        the Exendin-4 protein, to be transported across a eukaryotic cell-layer. A challenging part of
+
                            cargo,
                        our project design was to decide on a specific CPP out of the tremendous variety of different
+
                            the Exendin-4 protein, to be transported across a eukaryotic cell-layer. A challenging part
                        transporting peptides. In October 2019, CPPsite 2.0, the largest database for CPPs, contained
+
                            of
                        more than 1850 different peptide motifs, which are capable of delivering conjugates into cells.
+
                            our project design was to decide on a specific CPP out of the tremendous variety of
                        However, the CPPsite database only contains qualitative information about whether a peptide has
+
                            different
                        a cell-penetrating activity, but no quantitative information about how efficient cargo is
+
                            transporting peptides. In October 2019, CPPsite 2.0, the largest database for CPPs,
                        transported across the cell membrane.
+
                            contained
                    </p>
+
                            more than 1850 different peptide motifs, which are capable of delivering conjugates into
                    <p>
+
                            cells.
                        Therefore we decided to generate a predictive software tool, which allows assigning a transport
+
                            However, the CPPsite database only contains qualitative information about whether a peptide
                        efficiency score to CPPs. This allows making educated decisions on the design process.
+
                            has
                    </p>
+
                            a cell-penetrating activity, but no quantitative information about how efficient cargo is
 +
                            transported across the cell membrane.
 +
                        </p>
 +
                        <p>
 +
                            Therefore we decided to generate a predictive software tool, which allows assigning a
 +
                            transport
 +
                            efficiency score to CPPs. This allows making educated decisions on the design process.
 +
                        </p>
 +
                    </div>
 
                 </div>
 
                 </div>
            </div>
 
  
            <h2 style="font-family:'Righteous';">Overview of our tool</h2>
+
                <h2 style="font-family:'Righteous';">Overview of our tool</h2>
            <div class="row">
+
                <div class="row">
                <div class="col-12">
+
                    <div class="col-12">
                    <p>
+
                        <p>
                        Our goal was to create an easy-to-use software tool, which allows scientists to make design
+
                            C3Pred is an easy-to-use software tool, which allows scientists to make design choices for
                        choices for their system based on quantitative transport activity scores. We put a strong
+
                            their CPP-utilizing system based on quantitative transport activity scores. We put a strong
                        emphasis on good usability for different kinds of users. Firstly, we implemented an intuitive
+
                            emphasis on good usability for different kinds of users. Firstly, we implemented an
                        browser-based graphical user interface for simple usability. Secondly, we also released our
+
                            intuitive <a href="https://github.com/igemsoftware2019/Tuebingen_c3pred_gui"
                        software tool as a Python package, which is easily installable for everyone using PIP, allowing
+
                                        onclick='window.open("https://github.com/igemsoftware2019/Tuebingen_c3pred_gui","_self");'>browser-based
                        other developers to incorporate our software tool into their scripts.
+
                            graphical user interface</a>
                    </p>
+
                            for simple usability. Secondly, we also
                    <p>
+
                            released our software tool as a <a
                        Short peptide sequences can be submitted to the program by either using a sequence string in
+
                                href="https://github.com/igemsoftware2019/Tuebingen_c3pred"
                        FASTA-format, an Uniprot ID or an iGEM Registry ID of coding DNA sequences. Our tool computes
+
                                onclick='window.open("https://github.com/igemsoftware2019/Tuebingen_c3pred","_self");'>Python
                        a transport efficiency score for each sequence, which is automatically interpreted for the user
+
                            package</a>, which is easily installable for everyone
                        by comparing it to well-characterized CPPs.
+
                            using PIP, allowing other developers to incorporate our software tool into their scripts.
                    </p>
+
                        </p>
 +
                        <p>
 +
                            Short peptide sequences can be submitted to the program by either using a sequence string in
 +
                            FASTA-format, an Uniprot ID or an iGEM Registry ID of coding DNA sequences. Our tool
 +
                            computes
 +
                            a transport efficiency score for each sequence, which is automatically interpreted for the
 +
                            user
 +
                            by comparing it to well-characterized CPPs.
 +
                        </p>
  
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
  
            <h3 style="font-family:'Righteous';">Why use our tool?</h3>
+
 
            <div class="row">
+
                <div class="row">
                <div class="col-12">
+
                    <div class="col-12">
                    <p>
+
                        <h3 style="font-family:'Righteous'; color: #2ecc71">Why use our tool?</h3>
                        Our tool offers several distinct advantages for researchers interested in CPPs. First, our
+
                        <p>
                        tool predicts real numerical values, which allows for a much more fine-tuned evaluation, as
+
                            Our tool offers several distinct advantages for researchers interested in CPPs. First, our
                        well as a comparison of CPP efficacy. Second, our tool is as user-friendly as it gets. The
+
                            tool predicts real numerical values, which allows for a much more fine-tuned evaluation, as
                        installation for a local version is trivial, which also allows for very simple integration
+
                            well as a comparison of CPP efficacy. Second, our tool is as user-friendly as it gets. The
                        into more advanced workflows. Moreover, our tool is accessible as a web app
+
                            installation for a local version is trivial, which also allows for very simple integration
                        <a href="https://igem-tuebingen.com/c3pred/" onclick='window.open("https://igem-tuebingen.com/c3pred/","_self");'>here</a>.
+
                            into more advanced workflows. Moreover, our tool is accessible as a web app
                    </p>
+
                            <a href="https://igem-tuebingen.com/c3pred/"
                    <p>
+
                              onclick='window.open("https://igem-tuebingen.com/c3pred/","_self");'>here</a>.
                        Our very simple to use web interface offers three simple and useful options: Peptides can either
+
                        </p>
                        be entered as raw text sequences, via the Uniprot Accession number, or the iGEM Registry ID.
+
                        <p>
                        Third, since our algorithm instantly returns the CPP efficiency, several CPPs with different
+
                            Our very simple to use web interface offers three simple and useful options: Peptides can
                        modifications or lengths can be quickly compared, allowing for the exploration as well as the
+
                            either
                        design of novel CPPs.
+
                            be entered as raw text sequences, via the Uniprot Accession number, or the iGEM Registry ID.
                    </p>
+
                            Third, since our algorithm instantly returns the CPP efficiency, several CPPs with different
 +
                            modifications or lengths can be quickly compared, allowing for the exploration as well as
 +
                            the
 +
                            design of novel CPPs.
 +
                        </p>
  
 
                     </div>
 
                     </div>
Line 10,849: Line 10,927:
  
  
            <h2 style="font-family:'Righteous';">Installation and usage of our tool</h2>
+
                <h2 style="font-family:'Righteous';">Installation and usage of our tool</h2>
            <div class="row">
+
                <div class="row">
                <div class="col-12">
+
                    <div class="col-12">
                    <p>Our tool can be used on Linux, Windows and Mac OS. Please follow the installation instruction <a href="https://c3pred.readthedocs.io/en/latest/installation.html" onclick='window.open("https://c3pred.readthedocs.io/en/latest/installation.html");'>here</a>.</p>
+
                        <p>Our tool can be used on Linux, Windows and Mac OS. Please follow the installation instruction
                    <p>When starting our tool, the landing page allows navigating to the three running modes (from protein sequence,
+
                            <a href="https://c3pred.readthedocs.io/en/latest/installation.html"
                        Uniprot Accession number & iGEM Registry ID). Additional information about the running modes can
+
                              onclick='window.open("https://c3pred.readthedocs.io/en/latest/installation.html");'>here</a>.
                        be displayed by clicking on “more info”.</p>
+
                        </p>
                </div>
+
                        <p>When starting our tool, the landing page allows navigating to the three running modes (from
                <h4 style="font-family:'Righteous'; color: #2ecc71;">Prediction using a sequence string</h4>
+
                            protein sequence,
                <div class="col-12">
+
                            Uniprot Accession number & iGEM Registry ID). Additional information about the running modes
                    <p>
+
                            can
                        To predict the transport effectivity of a FASTA-formatted amino acid string, please make sure
+
                            be displayed by clicking on “more info”.</p>
                        that the sequence does only contain letters corresponding to the genetic code of the 20 standard
+
                    </div>
                        amino acids. Moreover, please make sure that the submitted sequence is not longer than 50 residues.
+
 
                     </p>
+
                    <div class="col-12">
 +
                        <h4 style="font-family:'Righteous';">Prediction using a sequence string</h4>
 +
                        <p>
 +
                            To predict the transport effectivity of a FASTA-formatted amino acid string, please make
 +
                            sure
 +
                            that the sequence does only contain letters corresponding to the genetic code of the 20
 +
                            standard
 +
                            amino acids. Moreover, please make sure that the submitted sequence is not longer than 40
 +
                            residues.
 +
                        </p>
 +
                     </div>
 +
 
 +
                    <div class="col-12">
 +
                        <h4 style="font-family:'Righteous';">Using a Uniprot Accession number</h4>
 +
                        <p>
 +
                            Since Uniprot is one of the largest publicly accessible resources for proteins, our tool
 +
                            allows
 +
                            using the Uniprot Accession number as input, which consists of 6-10 characters (e.g.
 +
                            Q86FU0).
 +
                            Information about the accession numbers can be found on the <a
 +
                                href="https://www.uniprot.org/help/accession_numbers"
 +
                                onclick='window.open("https://www.uniprot.org/help/accession_numbers","_self");'>Uniprot
 +
                            Website</a>.
 +
                        </p>
 +
                    </div>
 +
 
 +
                    <div class="col-12">
 +
                        <h4 style="font-family:'Righteous';">Prediction using an iGEM Registry ID</h4>
 +
                        <p>
 +
                            Prediction on sequences in the iGEM registry can only be made on parts tagged in the
 +
                            subcategory
 +
                            “coding sequence”, otherwise the submitted identifier is rejected for the prediction.
 +
                            The DNA sequences are automatically translated into protein sequences.
 +
                        </p>
 +
                        <figure class="vegan">
 +
                            <a style="font-size: small"
 +
                              href="https://2019.igem.org/wiki/images/4/4b/T--Tuebingen--c3pred_demo_1.gif"
 +
                              data-effect="mfp-zoom-out"
 +
                              title="Fig 2: C3Pred usage demonstration.">
 +
                                <img src="https://2019.igem.org/wiki/images/4/4b/T--Tuebingen--c3pred_demo_1.gif"
 +
                                    class="figure-img img-fluid rounded"
 +
                                    alt="A generic square placeholder"></a>
 +
                            <figcaption style="font-size: small; color: #F4F0DE">Figure 2: C3Pred usage demonstration.
 +
                            </figcaption>
 +
                        </figure>
 +
                    </div>
 
                 </div>
 
                 </div>
                <h4 style="font-family:'Righteous'; color: #2ecc71;">Using a Uniprot Accession number</h4>
 
                <div class="col-12">
 
                    <p>
 
                        Since Uniprot is one of the largest publicly accessible resources for proteins, our tool allows
 
                        using the Uniprot Accession number as input, which consists of 6-10 characters (e.g. Q86FU0).
 
                        Information about the accession numbers can be found on the <a href="https://www.uniprot.org/help/accession_numbers" onclick='window.open("https://www.uniprot.org/help/accession_numbers","_self");'>Uniprot Website</a>.
 
                    </p>
 
                </div>
 
                <h4 style="font-family:'Righteous'; color: #2ecc71;">Prediction using an iGEM Registry ID</h4>
 
                <div class="col-12">
 
                    <p>
 
                        Prediction on sequences in the iGEM registry can only be made on parts tagged in the subcategory
 
                        “coding sequence”, otherwise the submitted identifier is rejected for the prediction.
 
                        The DNA sequences are automatically translated into protein sequences.
 
                    </p>
 
                    <figure>
 
                        <a style="font-size: small"
 
                          href="https://2019.igem.org/wiki/images/4/4b/T--Tuebingen--c3pred_demo_1.gif"
 
                          data-effect="mfp-zoom-out"
 
                          title="Fig 2: C3Pred usage demonstration.">
 
                            <img src="https://2019.igem.org/wiki/images/4/4b/T--Tuebingen--c3pred_demo_1.gif"
 
                                class="figure-img img-fluid rounded"
 
                                alt="A generic square placeholder"></a>
 
                        <figcaption style="font-size: small; color: #F4F0DE">Fig 2: C3Pred usage demonstration.</figcaption>
 
                    </figure>
 
                </div>
 
            </div>
 
  
            <h2 style="font-family:'Righteous'; color:#2ecc71;">Implementation</h2>
+
                <h2 style="font-family:'Righteous'; color:#2ecc71;">Implementation</h2>
  
  
            <div class="row">
+
                <div class="row">
                <h4 style="font-family:'Righteous'; color: #2ecc71;">Input</h4>
+
 
                <div class="col-12">
+
                    <div class="col-12">
                    <p>
+
                        <h3 style="font-family:'Righteous'; color: #2ecc71;">Input</h3>
                        C3Pred accepts three possible input formats for protein data:
+
                        <p>
                    </p>
+
                            C3Pred accepts three possible input formats for protein data:
                    <ul style="color: #2ecc71">
+
                        </p>
                        <li>FASTA-formatted sequences</li>
+
                        <ul style="color: #2ecc71">
                        <li>UniProtKB Accession Number</li>
+
                            <li>FASTA-formatted sequences</li>
                        <li>iGEM Part ID</li>
+
                            <li>UniProtKB Accession Number</li>
                    </ul>
+
                            <li>iGEM Part ID</li>
                    <p>
+
                        </ul>
                        C3Pred automatically fetches and parses the information about the given identifiers using the
+
                        <p>
                        UniProt website REST API or using the iGEM Registry API, respectively. For this function, an internet connection is required.
+
                            C3Pred automatically fetches and parses the information about the given identifiers using
                    </p>
+
                            the
                </div>
+
                            UniProt website REST API or using the iGEM Registry API, respectively. For this function, an
                <h4 style="font-family:'Righteous'; color: #2ecc71;">Input requirements</h4>
+
                            internet connection is required.
                <div class="col-12">
+
                        </p>
                    <p>
+
                    </div>
                        All proteins submitted to the tool must fulfill certain criteria, such that a transport
+
 
                        efficiency score can be computed. CPPs usually have a length between 4-40 amino acids, thus only
+
                    <div class="col-12">
                        protein sequences with a length in this range are accepted as input. Moreover, only sequences
+
                        <h3 style="font-family:'Righteous'; color: #2ecc71;">Input requirements</h3>
                        containing the 20 standard amino acids should be used. Non-standard amino acid encodings like B
+
                        <p>
                        encoding for asparagine/aspartate or S for selenocysteine can also be parsed and used for prediction,
+
                            All proteins submitted to the tool must fulfill certain criteria, such that a transport
                        but this feature is experimental. Since information about those amino acids is not backed up by
+
                            efficiency score can be computed. CPPs usually have a length between 4-40 amino acids, thus
                        the training data, results produced for those peptides must be interpreted with caution.
+
                            only
                    </p>
+
                            protein sequences with a length in this range are accepted as input. Moreover, only
                    <p>
+
                            sequences
                        For iGEM part IDs further requirements need to be fulfilled, such that a prediction can be made.
+
                            containing the 20 standard amino acids should be used. Non-standard amino acid encodings
                        C3Pred only accepts parts defined as coding sequences. If the sequence is coding, our tool
+
                            like B
                        automatically translates it into a protein sequence.
+
                            encoding for asparagine/aspartate or S for selenocysteine can also be parsed and used for
                    </p>
+
                            prediction,
                </div>
+
                            but this feature is experimental. Since information about those amino acids is not backed up
                <h4 style="font-family:'Righteous'; color: #2ecc71;">Output</h4>
+
                            by
                <div class="col-12">
+
                            the training data, results produced for those peptides must be interpreted with caution.
                    <p>
+
                        </p>
                        For every peptide, a transport efficiency score is computed. For peptides without a carrier
+
                        <p>
                        property, the score is close to zero. For extremely active peptides, the score is close to 250-300.
+
                            For iGEM part IDs further requirements need to be fulfilled, such that a prediction can be
                        The values computed for different peptides can be directly compared. Since the output is a
+
                            made.
                        dimensionless numerical value, a straightforward classification into no/low/medium/high
+
                            C3Pred only accepts parts defined as coding sequences. If the sequence is coding, our tool
                        activity is provided for the user to facilitate the interpretation process. High activities
+
                            automatically translates it into a protein sequence.
                        are defined by being in the upper 25 percentile (activity value: 80.08) of all CPP motifs.
+
                        </p>
                        Medium activities are defined by being in the upper 50 percentile (activity value: 40.15).
+
                    </div>
                        Moreover, a range of activity values of frequently used CPPs in the literature is also provided
+
 
                        in the GUI for direct comparison.
+
                    <div class="col-12">
                    </p>
+
                        <h3 style="font-family:'Righteous'; color: #2ecc71;">Output</h3>
                </div>
+
                        <p>
                <figure>
+
                            For every peptide, a transport efficiency score is computed. For peptides without a carrier
 +
                            property, the score is close to zero. For extremely active peptides, the score is close to
 +
                            250-300.
 +
                            The values computed for different peptides can be directly compared. Since the output is a
 +
                            dimensionless numerical value, a straightforward classification into no/low/medium/high
 +
                            activity is provided for the user to facilitate the interpretation process. High activities
 +
                            are defined by being in the upper 25 percentile (activity value: 80.08) of all CPP motifs.
 +
                            Medium activities are defined by being in the upper 50 percentile (activity value: 40.15).
 +
                            Moreover, a range of activity values of frequently used CPPs in the literature is also
 +
                            provided
 +
                            in the GUI for direct comparison.
 +
                        </p>
 +
                    </div>
 +
                    <figure class="vegan">
 
                         <a style="font-size: small"
 
                         <a style="font-size: small"
 
                           href="https://2019.igem.org/wiki/images/d/d6/T--Tuebingen--Workflow-transparent.png"
 
                           href="https://2019.igem.org/wiki/images/d/d6/T--Tuebingen--Workflow-transparent.png"
Line 10,951: Line 11,060:
 
                                 class="figure-img img-fluid rounded"
 
                                 class="figure-img img-fluid rounded"
 
                                 alt="A generic square placeholder"></a>
 
                                 alt="A generic square placeholder"></a>
                            <figcaption style="font-size: small; color: #F4F0DE">Fig 3: The workflow of C3Pred: Information about the protein can
+
                        <figcaption style="font-size: small; color: #F4F0DE">Figure 3: The workflow of C3Pred:
                                be obtained from a sequence string direct.y, the iGEM part ID of coding sequences or
+
                            Information about the protein can
                                using a UniProtKB accession number. The protein is then used as input for our machine
+
                            be obtained from a sequence string direct.y, the iGEM part ID of coding sequences or
                                learning model and the activity score is computed as output.</figcaption>
+
                            using a UniProtKB accession number. The protein is then used as input for our machine
 +
                            learning model and the activity score is computed as output.
 +
                        </figcaption>
 
                     </figure>
 
                     </figure>
            </div>
+
                </div>
            <h3 style="font-family:'Righteous'; color:#2ecc71;">Core Algorithm</h3>
+
                <h3 style="font-family:'Righteous'; color:#2ecc71;">Core Algorithm</h3>
            <div class="container-fluid py-5 mb-0" style="background-color: #232323">
+
                <div class="container-fluid py-5 mb-0" style="background-color: #232323">
 
                     <!-- FOR REUSE: REMOVE bg-dark IF U DONT WANNA HAVE A DARK BACKGROUND -->
 
                     <!-- FOR REUSE: REMOVE bg-dark IF U DONT WANNA HAVE A DARK BACKGROUND -->
 
                     <div id="accordion">
 
                     <div id="accordion">
Line 10,976: Line 11,087:
 
                                     <h3 style="font-family:'Righteous'; color: #2ecc71;">XGBoost</h3>
 
                                     <h3 style="font-family:'Righteous'; color: #2ecc71;">XGBoost</h3>
 
                                     <p style="color: #F4F0DE">
 
                                     <p style="color: #F4F0DE">
                                         C3PRed is based on gradient boosted trees using the implementation of the XGBoost
+
                                         C3PRed is based on gradient boosted trees using the implementation of the
 +
                                        XGBoost
 
                                         library [5]. Gradient boosted trees are a commonly used algorithm for
 
                                         library [5]. Gradient boosted trees are a commonly used algorithm for
 
                                         supervised machine learning problems. Key advantages are their inherently
 
                                         supervised machine learning problems. Key advantages are their inherently
 
                                         fast training speed and high accuracy for problems, which cannot be solved using
 
                                         fast training speed and high accuracy for problems, which cannot be solved using
 
                                         deep learning techniques, due to sparse datasets. The key idea of the gradient
 
                                         deep learning techniques, due to sparse datasets. The key idea of the gradient
                                         boosted trees algorithm is to map a set of input features onto a single numerical
+
                                         boosted trees algorithm is to map a set of input features onto a single
 +
                                        numerical
 
                                         value. In our case, the input is the encoded protein sequence and the predicted
 
                                         value. In our case, the input is the encoded protein sequence and the predicted
                                         numerical value is the activity scores. For this purpose, numerous decision trees
+
                                         numerical value is the activity scores. For this purpose, numerous decision
 +
                                        trees
 
                                         are generated, which are iteratively added to the model, such that with each
 
                                         are generated, which are iteratively added to the model, such that with each
 
                                         addition the model improves.
 
                                         addition the model improves.
Line 10,989: Line 11,103:
 
                                     <<h3 style="font-family:'Righteous'; color: #2ecc71;">Data</h3>
 
                                     <<h3 style="font-family:'Righteous'; color: #2ecc71;">Data</h3>
 
                                     <p style="color: #F4F0DE">
 
                                     <p style="color: #F4F0DE">
                                         To train our model we used the publicly available dataset by Ramaker et al. 2018,
+
                                         To train our model we used the publicly available dataset by Ramaker et al.
 +
                                        2018,
 
                                         consisting of transport efficiency values for 474 short peptide motifs [6].
 
                                         consisting of transport efficiency values for 474 short peptide motifs [6].
 
                                         In their experiments, short peptides were coupled with a fluorophore and the
 
                                         In their experiments, short peptides were coupled with a fluorophore and the
 
                                         transport over the membrane was then measured using fluorescence as a read-out.
 
                                         transport over the membrane was then measured using fluorescence as a read-out.
                                         The transport efficiency data for each peptide were log2-transformed to facilitate
+
                                         The transport efficiency data for each peptide were log2-transformed to
 +
                                        facilitate
 
                                         the fitting process.
 
                                         the fitting process.
 
                                     </p>
 
                                     </p>
Line 11,000: Line 11,116:
 
                                     <p style="color: #F4F0DE">
 
                                     <p style="color: #F4F0DE">
 
                                         To encode the peptides for the machine learning step, we chose an extended
 
                                         To encode the peptides for the machine learning step, we chose an extended
                                         version of the BLOMAP encoding. BLOMAP is a machine-learning oriented representation
+
                                         version of the BLOMAP encoding. BLOMAP is a machine-learning oriented
 +
                                        representation
 
                                         of amino acids [7]. It is based on a transformed BLOSUM substitution matrix.
 
                                         of amino acids [7]. It is based on a transformed BLOSUM substitution matrix.
 
                                         The encoding is extended by numerical values by physicochemical properties of
 
                                         The encoding is extended by numerical values by physicochemical properties of
                                         each amino acid, including flexibility, weight, isoelectric point, hydrophobicity,
+
                                         each amino acid, including flexibility, weight, isoelectric point,
 +
                                        hydrophobicity,
 
                                         polarity, and area.
 
                                         polarity, and area.
 
                                     </p>
 
                                     </p>
 
                                     <p>
 
                                     <p>
                                         Each peptide is represented as the set of all possible sliding windows of the size
+
                                         Each peptide is represented as the set of all possible sliding windows of the
 +
                                        size
 
                                         of 14 residues. Shorter peptides are padded at the N- and C-terminus.
 
                                         of 14 residues. Shorter peptides are padded at the N- and C-terminus.
                                         An advantage of such an encoding is that after the training steps, it is possible
+
                                         An advantage of such an encoding is that after the training steps, it is
                                         to analyze the final prediction tool for the most influential features. This allows
+
                                        possible
                                         a better understanding of the transport mechanism and the general characteristics of CPPs.
+
                                         to analyze the final prediction tool for the most influential features. This
 +
                                        allows
 +
                                         a better understanding of the transport mechanism and the general
 +
                                        characteristics of CPPs.
 
                                     </p>
 
                                     </p>
  
Line 11,017: Line 11,139:
 
                                     <p style="color: #F4F0DE">
 
                                     <p style="color: #F4F0DE">
 
                                         For each sliding window of a peptide, an activity score is computed. The total
 
                                         For each sliding window of a peptide, an activity score is computed. The total
                                         activity of the peptide is determined by the mean of all activity values of all sliding windows.
+
                                         activity of the peptide is determined by the mean of all activity values of all
 +
                                        sliding windows.
 
                                         Our CPP transport activity prediction model was fitted to optimize Pearson's
 
                                         Our CPP transport activity prediction model was fitted to optimize Pearson's
                                         correlation coefficient of the predicted values against the experimentally derived
+
                                         correlation coefficient of the predicted values against the experimentally
                                         ones. To find good hyperparameters of the gradient boosted trees algorithm, a random search was performed.
+
                                        derived
 +
                                         ones. To find good hyperparameters of the gradient boosted trees algorithm, a
 +
                                        random search was performed.
 
                                         The evaluation of the performance of our predictor was performed using a 10-fold
 
                                         The evaluation of the performance of our predictor was performed using a 10-fold
                                         cross-validation. In a k-fold cross-validation, the data is split into k-subsets of
+
                                         cross-validation. In a k-fold cross-validation, the data is split into k-subsets
 +
                                        of
 
                                         equal size. The predictor is tested k times, with k-1 subsets of the data in the
 
                                         equal size. The predictor is tested k times, with k-1 subsets of the data in the
 
                                         training set and 1 subset in the test data. In each iteration, the single subset
 
                                         training set and 1 subset in the test data. In each iteration, the single subset
                                         which is not part of the training set is used for evaluation. In the end, each of
+
                                         which is not part of the training set is used for evaluation. In the end, each
 +
                                        of
 
                                         the k subsets has been in the training set exactly once.
 
                                         the k subsets has been in the training set exactly once.
 
                                     </p>
 
                                     </p>
  
                                     <table class="veggie">
+
                                     <figure>
                                <caption>Table 1: Hyperparameters of XGBoost model</caption>
+
                                        <a style="font-size: small"
                                <tbody>
+
                                          href="https://2019.igem.org/wiki/images/f/f3/T--Tuebingen--softwaretable.png"
                                <th>Hyperparameter</th>
+
                                          data-effect="mfp-zoom-out" title="">
                                <th>Value</th>
+
                                            <img src="https://2019.igem.org/wiki/images/f/f3/T--Tuebingen--softwaretable.png"
                                    <tr>
+
                                                class="figure-img img-fluid rounded" alt="Placeholder"></a>
                                        <td>window_size</td>
+
                                     </figure>
                                        <td>14</td>
+
                                    </tr>
+
                                    <tr>
+
                                        <td>n_estimators</td>
+
                                        <td>600</td>
+
                                    </tr>
+
                                <tr>
+
                                        <td>learning_rate</td>
+
                                        <td>0.4</td>
+
                                    </tr>
+
                                <tr>
+
                                        <td>max_depth</td>
+
                                        <td>5</td>
+
                                    </tr>
+
                                <tr>
+
                                        <td>subsample</td>
+
                                        <td>0.6</td>
+
                                    </tr>
+
                                <tr>
+
                                        <td>gamma</td>
+
                                        <td>3</td>
+
                                    </tr>
+
                                <tr>
+
                                        <td>min_child_weight</td>
+
                                        <td>0.75</td>
+
                                    </tr>
+
                                <tr>
+
                                        <td>colsample_bytree</td>
+
                                        <td>0.8</td>
+
                                     </tr>
+
                                </tbody>
+
                            </table>
+
 
                                 </div>
 
                                 </div>
 
                             </div>
 
                             </div>
Line 11,074: Line 11,169:
 
                 </div>
 
                 </div>
  
            <h3 style="font-family:'Righteous';">Performance</h3>
+
 
            <div class="row">
+
                <div class="row">
                <div class="col-12">
+
                    <div class="col-12">
                    <p>
+
                        <h3 style="font-family:'Righteous'; color: #2ecc71">Performance</h3>
                         Predicted activity values of the 10-fold cross-validation are plotted against the
+
                         <p>
                        experimentally derived ones. Each point represents a peptide. If the predictions would
+
                            Predicted activity values of the 10-fold cross-validation are plotted against the
                        be perfectly accurate, all points would be on the diagonal.
+
                            experimentally derived ones. Each point represents a peptide. If the predictions would be
                    </p>
+
                            perfectly accurate, all points would be on the diagonal. Our algorithm achieved a Pearson
                    <p>
+
                            correlation of 0.804, which is considered very good.
                        Pearson correlation: 0.804
+
                        </p>
                    </p>
+
                        <figure class="vegan">
                    <figure>
+
                            <a style="font-size: small"
                        <a style="font-size: small"
+
                              href="https://2019.igem.org/wiki/images/f/f6/T--Tuebingen--predicted-values-scatter.png_transparent.png"
                          href="https://2019.igem.org/wiki/images/f/f6/T--Tuebingen--predicted-values-scatter.png_transparent.png"
+
                              data-effect="mfp-zoom-out"
                          data-effect="mfp-zoom-out"
+
                              title="Fig 4">
                          title="Fig 4">
+
                                <img src="https://2019.igem.org/wiki/images/f/f6/T--Tuebingen--predicted-values-scatter.png_transparent.png"
                            <img src="https://2019.igem.org/wiki/images/f/f6/T--Tuebingen--predicted-values-scatter.png_transparent.png"
+
                                    class="figure-img img-fluid rounded"
                                class="figure-img img-fluid rounded"
+
                                    alt="A generic square placeholder"></a>
                                alt="A generic square placeholder"></a>
+
                            <figcaption style="font-size: small; color: #F4F0DE">Figure 4: Prediction results of C3Pred
                        <figcaption style="font-size: small; color: #F4F0DE">Fig 4: Prediction results of C3Pred compared to experimentally derived values.
+
                                compared to experimentally derived values.
                            Each point represents a protein. The correlation between predicted and the experimental values is 0.804.</figcaption>
+
                                Each point represents a protein. The correlation between predicted and the experimental
                    </figure>
+
                                values is 0.804.
                    <p>
+
                            </figcaption>
                        The importance of each feature of the BLOMAP encoding is shown in this visualization.
+
                        </figure>
                        The higher the values, the greater is the importance of the feature on the results of the
+
                        <p>
                        prediction. The feature isoelectric point is the most important one, which indicates that
+
                            The importance of each feature of the BLOMAP encoding is shown in this visualization.
                        charged amino acids play the most important role in high activity values.
+
                            The higher the values, the greater is the importance of the feature on the results of the
                    </p>
+
                            prediction. The feature isoelectric point is the most important one, which indicates that
                    <figure>
+
                            charged amino acids play the most important role in high activity values.
                        <a style="font-size: small"
+
                        </p>
                          href="https://2019.igem.org/wiki/images/b/bc/T--Tuebingen--feature-importance_transparent.png"
+
                        <figure class="vegan">
                          data-effect="mfp-zoom-out"
+
                            <a style="font-size: small"
                          title="Fig.5: Feature importance plot of the XGBoost model">
+
                              href="https://2019.igem.org/wiki/images/b/bc/T--Tuebingen--feature-importance_transparent.png"
                            <img src="https://2019.igem.org/wiki/images/b/bc/T--Tuebingen--feature-importance_transparent.png"
+
                              data-effect="mfp-zoom-out"
                                class="figure-img img-fluid rounded"
+
                              title="Fig.5: Feature importance plot of the XGBoost model">
                                alt="A generic square placeholder"></a>
+
                                <img src="https://2019.igem.org/wiki/images/b/bc/T--Tuebingen--feature-importance_transparent.png"
                        <figcaption style="font-size: small; color: #F4F0DE">Fig 5: Feature importance plot of the XGBoost model. Each bar represents
+
                                    class="figure-img img-fluid rounded"
                            one of the features of the BLOMAP encoding. The important feature for the prediction is
+
                                    alt="A generic square placeholder"></a>
                            the isoelectric point, indicating the most influential role being charge.</figcaption>
+
                            <figcaption style="font-size: small; color: #F4F0DE">Figure 5: Feature importance plot of
                    </figure>
+
                                the XGBoost model. Each bar represents
 +
                                one of the features of the BLOMAP encoding. The important feature for the prediction is
 +
                                the isoelectric point, indicating the most influential role being charge.
 +
                            </figcaption>
 +
                        </figure>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
  
            <h2 style="font-family:'Righteous';">Results</h2>
+
                <h2 style="font-family:'Righteous';">Results</h2>
            <div class="row">
+
                <div class="row">
                <h4 style="font-family:'Righteous'; color: #2ecc71;">Validation against experimental data</h4>
+
 
                <div class="col-12">
+
                    <div class="col-12">
                    <p>
+
                        <h3 style="font-family:'Righteous'; color: #2ecc71;">Validation against experimental data</h3>
                        We used the data obtained from the experimental work of previous iGEM teams to validate the
+
                        <p>
                        results of our prediction tool. In the past years, numerous teams have worked with CPPs. Some
+
                            We used the data obtained from the experimental work of previous iGEM teams to validate the
                        of them conducted experiments to compare the transport efficiency of the peptides, which again
+
                            results of our prediction tool. In the past years, numerous teams have worked with CPPs.
                        indicates the potential usefulness of our tool to other teams.
+
                            Some
                    </p>
+
                            of them conducted experiments to compare the transport efficiency of the peptides, which
                    <p>
+
                            again
                         The ATOMS Turkiye team of 2013 compared the efficiency of the two CPPs <a href="http://parts.igem.org/wiki/index.php?title=Part:BBa_K1202006" onclick='window.open("http://parts.igem.org/wiki/index.php?title=Part:BBa_K1202006","_self");'>TAT</a>
+
                            indicates the potential usefulness of our tool to other teams.
                        and <a href="http://parts.igem.org/wiki/index.php?title=Part:BBa_K1202009" onclick='window.open("http://parts.igem.org/wiki/index.php?title=Part:BBa_K1202009","_self");'>MPG</a>
+
                        </p>
                        to transport an apoptosis-inducing protein into different cell lines. Their
+
                        <h4 style="color: #2ecc71">ATOMS Turkiye</h4>
                        findings of TAT fusion protein being better transported into the cell than the MPG fusion protein,
+
                         <p>
                        are in accordance with our predicted values.
+
                            The ATOMS Turkiye team of 2013 compared the efficiency of the two CPPs <a
                    </p>
+
                                href="http://parts.igem.org/wiki/index.php?title=Part:BBa_K1202006"
                    <p>
+
                                onclick='window.open("http://parts.igem.org/wiki/index.php?title=Part:BBa_K1202006","_self");'>TAT</a>
                        Our predicted activity values (higher is better):<br>
+
                            and <a href="http://parts.igem.org/wiki/index.php?title=Part:BBa_K1202009"
                        TAT: 45.97<br>
+
                                  onclick='window.open("http://parts.igem.org/wiki/index.php?title=Part:BBa_K1202009","_self");'>MPG</a>
                        MPG: 34.27
+
                            to transport an apoptosis-inducing protein into different cell lines. Their
                    </p>
+
                            findings of TAT fusion protein being better transported into the cell than the MPG fusion
                    <p><a href="http://parts.igem.org/Part:BBa_K1202009" onclick='window.open("http://parts.igem.org/Part:BBa_K1202009","_self");'>Their results summary</a></p>
+
                            protein,
                    <p>
+
                            are in accordance with our predicted values.
                         The iGEM Team DLUT-China of 2018 conducted a similar comparative experiment for multiple CPPs.
+
                        </p>
                        They compared R8, <a href="http://parts.igem.org/wiki/index.php?title=Part:BBa_K1202006" onclick='window.open("http://parts.igem.org/wiki/index.php?title=Part:BBa_K1202006","_self");'>TAT</a>,
+
                        <p>
                        <a href="http://parts.igem.org/Part:BBa_K2752011" onclick='window.open("http://parts.igem.org/Part:BBa_K2752011","_self");'>Pep-1 and cyclic heptapeptide DNP</a>.<br>
+
                            Our predicted activity values (higher is better):<br>
                    Their results for R8, TAT and Pep-1 are in accordance with our predictions. R8 was the most transported peptides in their experiments and also scored best in our prediction.
+
                            TAT: 45.97<br>
                    However, our tool predicts a bad score for the cyclic heptapeptide DNP, which shows high transport efficiency in their experiment. This can be explained by the fact that our tool was trained only with linear protein sequences containing the standard 20 amino acids. Special peptides, such as this one, probably cannot be predicted by our tool correctly.
+
                            MPG: 34.27
                    </p>
+
                        </p>
                    <p>
+
                        <p><a href="http://2013.igem.org/Team:ATOMS-Turkiye/Project/Module2/Experiment"
                        Our predicted activity values (higher is better):<br>
+
                              onclick='window.open("http://2013.igem.org/Team:ATOMS-Turkiye/Project/Module2/Experiment","_self");'>Results
                        R8: 52.50<br>
+
                            of the ATOMS Turkiye team</a></p>
                        TAT: 45.97<br>
+
                        <h4 style="color: #2ecc71">DLUT-China</h4>
                        Pep-1: 45.12<br>
+
                         <p>
                        cyclic heptapeptide DNP: 7.69
+
                            The iGEM Team DLUT-China of 2018 conducted a similar comparative experiment for multiple
                    </p>
+
                            CPPs.
                    <p><a href="http://2018.igem.org/Team:DLUT_China/Results#A4.3" onclick='window.open("http://2018.igem.org/Team:DLUT_China/Results#A4.3","_self");'>Their results summary</a></p>
+
                            They compared R8, <a href="http://parts.igem.org/wiki/index.php?title=Part:BBa_K1202006"
 +
                                                onclick='window.open("http://parts.igem.org/wiki/index.php?title=Part:BBa_K1202006","_self");'>TAT</a>,
 +
                            <a href="http://parts.igem.org/Part:BBa_K2752011"
 +
                              onclick='window.open("http://parts.igem.org/Part:BBa_K2752011","_self");'>Pep-1 and
 +
                                cyclic heptapeptide DNP</a>.<br>
 +
                            Their results for R8, TAT and Pep-1 are in accordance with our predictions. R8 was the most
 +
                            transported peptides in their experiments and also scored best in our prediction.
 +
                            However, our tool predicts a bad score for the cyclic heptapeptide DNP, which shows high
 +
                            transport efficiency in their experiment. This can be explained by the fact that our tool
 +
                            was trained only with linear protein sequences containing the standard 20 amino acids.
 +
                            Special peptides, such as this one, probably cannot be predicted by our tool correctly.
 +
                        </p>
 +
                        <p>
 +
                            Our predicted activity values (higher is better):<br>
 +
                            R8: 52.50<br>
 +
                            TAT: 45.97<br>
 +
                            Pep-1: 45.12<br>
 +
                            cyclic heptapeptide DNP: 7.69
 +
                        </p>
 +
                        <p><a href="http://2018.igem.org/Team:DLUT_China/Results#A4.3"
 +
                              onclick='window.open("http://2018.igem.org/Team:DLUT_China/Results#A4.3","_self");'>Results
 +
                            iGEM Team DLUT-China</a></p>
  
  
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
            <h2 style="font-family:'Righteous';">How our software influenced our project</h2>
+
                <h2 style="font-family:'Righteous';">How our software influenced our project</h2>
            <div class="row">
+
                <div class="row">
                <h4 style="font-family:'Righteous'; color: #2ecc71;">Validation against experimental data</h4>
+
 
                <div class="col-12">
+
                    <div class="col-12">
                    <p>
+
                        <h3 style="font-family:'Righteous'; color: #2ecc71;">Validation against experimental data</h3>
                        We used the results of C3Pred to analyze CPPs to decide on a suitable CPP for our project.
+
                        <p>
                        We analyzed a series of CPP which were already present in the iGEM Registry and additional
+
                            We used the results of C3Pred to analyze CPPs to decide on a suitable CPP for our project.
                        peptides which were frequently referred to in the literature.
+
                            We analyzed a series of CPP which were already present in the iGEM Registry and additional
                    </p>
+
                            peptides which were frequently referred to in the literature.
                    <p>
+
                        </p>
                        <a href="http://parts.igem.org/Part:BBa_K2660000" onclick='window.open("http://parts.igem.org/Part:BBa_K2660000","_self");'>Penetratin : 153.16</a><br>
+
                        <p>
                        <a href="http://parts.igem.org/Part:BBa_K380005" onclick='window.open("http://parts.igem.org/Part:BBa_K380005","_self");'>Tp10 : 100.68</a><br>
+
                            <a href="http://parts.igem.org/Part:BBa_K2660000"
                        <a href="http://parts.igem.org/wiki/index.php?title=Part:BBa_K1202006" onclick='window.open("http://parts.igem.org/wiki/index.php?title=Part:BBa_K1202006","_self");'>TAT: 45.97</a>
+
                              onclick='window.open("http://parts.igem.org/Part:BBa_K2660000","_self");'>Penetratin :
                    </p>
+
                                153.16</a><br>
                    <p>
+
                            <a href="http://parts.igem.org/Part:BBa_K380005"
                        Since Penetratin showed the highest scores compared to the other parts available in the iGEM Registry,
+
                              onclick='window.open("http://parts.igem.org/Part:BBa_K380005","_self");'>Tp10 :
                        we decided to select this specific CPP as the carrier for the Exendin-4 protein of our project.
+
                                100.68</a><br>
                    </p>
+
                            <a href="http://parts.igem.org/wiki/index.php?title=Part:BBa_K1202006"
                    <p>
+
                              onclick='window.open("http://parts.igem.org/wiki/index.php?title=Part:BBa_K1202006","_self");'>TAT:
                        Moreover, we computed an elevated transport activity for the CPP fusion protein
+
                                45.97</a>
                        <a href="http://parts.igem.org/Part:BBa_K3096016" onclick='window.open("http://parts.igem.org/Part:BBa_K3096016","_self");'>TAT-LK15</a>
+
                        </p>
                        , which has been reported to enhance the properties of TAT.
+
                        <p>
                    </p>
+
                            Since Penetratin showed the highest scores compared to the other parts available in the iGEM
                    <p>
+
                            Registry,
                        <a href="http://parts.igem.org/Part:BBa_K3096016" onclick='window.open("http://parts.igem.org/Part:BBa_K3096016","_self");'>TAT-LK15 : 228.81</a>
+
                            we decided to select this specific CPP as the carrier for the Exendin-4 protein of our
                    </p>
+
                            project.
 +
                        </p>
 +
                        <p>
 +
                            Moreover, we computed an elevated transport activity for the CPP fusion protein
 +
                            <a href="http://parts.igem.org/Part:BBa_K3096016"
 +
                              onclick='window.open("http://parts.igem.org/Part:BBa_K3096016","_self");'>TAT-LK15</a>
 +
                            , which has been reported to enhance the properties of TAT.
 +
                        </p>
 +
                        <p>
 +
                            <a href="http://parts.igem.org/Part:BBa_K3096016"
 +
                              onclick='window.open("http://parts.igem.org/Part:BBa_K3096016","_self");'>TAT-LK15 :
 +
                                228.81</a>
 +
                        </p>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
  
            <h3 style="font-family:'Righteous';">How our software influenced our project (2.0)</h3>
+
 
            <div class="row">
+
                <div class="row">
                <div class="col-12">
+
                    <div class="col-12">
                    <p>
+
                        <h3 style="font-family:'Righteous'; color: #2ecc71">How our software influenced our project
                        We used the results of C3Pred to analyze a series of CPPs to decide on a suitable peptide for our project.
+
                            (2.0)</h3>
                    </p>
+
                        <p>
                    <p>
+
                            We used the results of C3Pred to analyze a series of CPPs to decide on a suitable peptide
                        Details on the selection process can be found on the <a href="https://2019.igem.org/TEam:Tuebingen/Model" onclick='window.open("https://2019.igem.org/TEam:Tuebingen/Model","_self");'>modeling page</a>.
+
                            for our project.
                    </p>
+
                        </p>
 +
                        <p>
 +
                            Details on the selection process can be found on the <a
 +
                                href="https://2019.igem.org/TEam:Tuebingen/Model"
 +
                                onclick='window.open("https://2019.igem.org/Team:Tuebingen/Model","_self");'>modeling
 +
                            page</a>.
 +
                        </p>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
        </div>
+
            </div>
  
          <div id="glpreferences" class="row">
+
            <div id="glpreferences" class="row">
 
                 <h3 style="font-family:'Righteous'; color: #2ecc71;">References</h3>
 
                 <h3 style="font-family:'Righteous'; color: #2ecc71;">References</h3>
 
                 <div class="col-12" style="font-size: small; overflow-wrap: break-word;">
 
                 <div class="col-12" style="font-size: small; overflow-wrap: break-word;">
 
                     <ol>
 
                     <ol>
                         <li style="color: #F4F0DE"><a href=https://www.nature.com/articles/s41467-018-04874-6>https://www.nature.com/articles/s41467-018-04874-6</a></li>
+
                         <li style="color: #F4F0DE"><a href=https://www.nature.com/articles/s41467-018-04874-6>Kauffman,
                         <li id="ref_2" style="color: #F4F0DE"><a href="https://www.nature.com/articles/s41598-018-30790-2">https://www.nature.com/articles/s41598-018-30790-2</a></li>
+
                            W. Berkeley, Shantanu Guha, and William C. Wimley. "Synthetic molecular evolution of hybrid
                         <li id="ref_3" style="color: #F4F0DE"><a href="https://www.doi.org/10.1016/j.tips.2017.01.003">https://www.doi.org/10.1016/j.tips.2017.01.003</a></li>
+
                            cell penetrating peptides." Nature communications 9.1 (2018): 2568.</a></li>
                         <li id="ref_4" style="color: #F4F0DE"><a href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC6324683/">https://www.ncbi.nlm.nih.gov/pmc/articles/PMC6324683/</a></li>
+
                         <li id="ref_2" style="color: #F4F0DE"><a
                         <li id="ref_5" style="color: #F4F0DE"><a href="http://dx.doi.org/10.1145/2939672.2939785">http://dx.doi.org/10.1145/2939672.2939785</a></li>
+
                                href="https://www.nature.com/articles/s41598-018-30790-2">Hoffmann, Katrin, et al. "A
                         <li id="ref_6" style="color: #F4F0DE"><a href="https://doi.org/10.1142/9781860947322_0014">https://doi.org/10.1142/9781860947322_0014</a></li>
+
                            platform for discovery of functional cell-penetrating peptides for efficient multi-cargo
                         <li id="ref_7" style="color: #F4F0DE"><a href="https://doi.org/10.1080/10717544.2018.1458921">https://doi.org/10.1080/10717544.2018.1458921</a></li>
+
                            intracellular delivery." Scientific reports 8.1 (2018): 12538.</a></li>
 +
                         <li id="ref_3" style="color: #F4F0DE"><a href="https://www.doi.org/10.1016/j.tips.2017.01.003">Guidotti,
 +
                            Giulia, Liliana Brambilla, and Daniela Rossi. "Cell-penetrating peptides: from basic
 +
                            research to clinics." Trends in pharmacological sciences 38.4 (2017): 406-424.</a></li>
 +
                         <li id="ref_4" style="color: #F4F0DE"><a
 +
                                href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC6324683/">Tripathi, Prem Prakash, et
 +
                            al. "Cell penetrating peptides in preclinical and clinical cancer diagnosis and therapy."
 +
                            Oncotarget 9.98 (2018): 37252.</a></li>
 +
                         <li id="ref_5" style="color: #F4F0DE"><a href="http://dx.doi.org/10.1145/2939672.2939785">Chen,
 +
                            Tianqi, and Carlos Guestrin. "Xgboost: A scalable tree boosting system." Proceedings of the
 +
                            22nd acm sigkdd international conference on knowledge discovery and data mining. ACM,
 +
                            2016.</a></li>
 +
                         <li id="ref_6" style="color: #F4F0DE"><a href="https://doi.org/10.1142/9781860947322_0014">Maetschke,
 +
                            Stefan, Michael Towsey, and Mikael Boden. "BLOMAP: an encoding of amino acids which improves
 +
                            signal peptide cleavage site prediction." Proceedings of the 3rd Asia-Pacific bioinformatics
 +
                            conference. 2005.</a></li>
 +
                         <li id="ref_7" style="color: #F4F0DE"><a href="https://doi.org/10.1080/10717544.2018.1458921">Ramaker,
 +
                            Katrin, et al. "Cell penetrating peptides: a comparative transport analysis for 474 sequence
 +
                            motifs." Drug delivery 25.1 (2018): 928-937.</a></li>
 
                     </ol>
 
                     </ol>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
    </main>
+
            <p style="visibility: hidden">hallo123</p>
 +
            <p style="visibility: hidden">hallo123</p>
 +
            <p style="visibility: hidden">hallo123</p>
 +
            <p style="visibility: hidden">hallo123</p>
 +
            <p style="visibility: hidden">hallo123</p>
 +
        </main>
 +
    </div>
 
</div>
 
</div>
</div>
 
 
  
  
Line 11,225: Line 11,385:
 
<script src="https://2019.igem.org/Team:Tuebingen/smoothScrollJS?action=raw&ctype=text/javascript"></script>
 
<script src="https://2019.igem.org/Team:Tuebingen/smoothScrollJS?action=raw&ctype=text/javascript"></script>
 
<script>
 
<script>
var scroll = new SmoothScroll('a[href*="#"]');
+
    var scroll = new SmoothScroll('a[href*="#"]');
 
</script>
 
</script>
 
<script src="https://2019.igem.org/Team:Tuebingen/magni-popup-minJS?action=raw&ctype=text/javascript"></script>
 
<script src="https://2019.igem.org/Team:Tuebingen/magni-popup-minJS?action=raw&ctype=text/javascript"></script>
 
<script src="https://2019.igem.org/Team:Tuebingen/popup-imagesJS?action=raw&ctype=text/javascript"></script>
 
<script src="https://2019.igem.org/Team:Tuebingen/popup-imagesJS?action=raw&ctype=text/javascript"></script>
  
<div class='container-fluid p-3' style="background-color: rgba(35, 35, 35, 0.4);">
+
<div class='container-fluid p-3' style="background-color: #919191;">
 
     <hr>
 
     <hr>
 
     <div class='row align-items-center'>
 
     <div class='row align-items-center'>
Line 11,238: Line 11,398:
 
                                                                             style="max-height: 80px;"></a>
 
                                                                             style="max-height: 80px;"></a>
 
         </div>
 
         </div>
        <div class='col-6 col-md-2 sponsorLogo text-center'>
+
 
            <a href="https://www.embl.de/" target="_blank2"><img class="img-fluid"
+
                                                                src="https://2019.igem.org/wiki/images/c/c4/T--Tuebingen--embl_logo.png"
+
                                                                style="max-height: 80px;"></a>
+
        </div>
+
                <div class='col-6 col-md-2 sponsorLogo text-center'>
+
            <a href="https://www.medizin.uni-tuebingen.de/de/medizinische-fakultaet/forschung/core-facilities/ncct"
+
              target="_blank2"><img class="img-fluid"
+
                                    src="https://2019.igem.org/wiki/images/e/ec/T--Tuebingen--NCCT.png"
+
                                    style="max-height: 80px;"></a>
+
        </div>
+
 
         <div class='col-6 col-md-2 sponsorLogo text-center'>
 
         <div class='col-6 col-md-2 sponsorLogo text-center'>
 
             <a href="https://www.kohlbacherlab.org" target="_blank2"><img class="img-fluid"
 
             <a href="https://www.kohlbacherlab.org" target="_blank2"><img class="img-fluid"
Line 11,258: Line 11,408:
 
                                                                                                 src="https://2019.igem.org/wiki/images/8/86/T--Tuebingen--LogoDSS.png"
 
                                                                                                 src="https://2019.igem.org/wiki/images/8/86/T--Tuebingen--LogoDSS.png"
 
                                                                                                 style="max-height: 80px;"></a>
 
                                                                                                 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>
  
Line 11,264: Line 11,420:
 
                                                                                 src="https://2019.igem.org/wiki/images/e/eb/T--Tuebingen--Logo-Experimenta.png"
 
                                                                                 src="https://2019.igem.org/wiki/images/e/eb/T--Tuebingen--Logo-Experimenta.png"
 
                                                                                 style="max-height: 80px;"></a>
 
                                                                                 style="max-height: 80px;"></a>
 +
        </div>
 +
 +
        <div class='col-6 col-md-2 sponsorLogo text-center'>
 +
            <a href="https://www.medizin.uni-tuebingen.de/de/medizinische-fakultaet/forschung/core-facilities/ncct"
 +
              target="_blank2"><img class="img-fluid"
 +
                                    src="https://2019.igem.org/wiki/images/e/ec/T--Tuebingen--NCCT.png"
 +
                                    style="max-height: 80px;"></a>
 
         </div>
 
         </div>
  
Line 11,274: Line 11,437:
 
                                                                     src="https://2019.igem.org/wiki/images/4/43/T--Tuebingen--lexogen_logo.png"></a>
 
                                                                     src="https://2019.igem.org/wiki/images/4/43/T--Tuebingen--lexogen_logo.png"></a>
 
         </div>
 
         </div>
                <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.zmbp.uni-tuebingen.de/zmbp.html" target="_blank2"><img class="img-fluid"
 
                                                                                         src="https://2019.igem.org/wiki/images/d/d8/T--Tuebingen--zmbp_logo.png"
 
                                                                                         src="https://2019.igem.org/wiki/images/d/d8/T--Tuebingen--zmbp_logo.png"
Line 11,319: Line 11,482:
 
                                                                                   src="https://2019.igem.org/wiki/images/1/18/T--Tuebingen--microsynth_logo.png"></a>
 
                                                                                   src="https://2019.igem.org/wiki/images/1/18/T--Tuebingen--microsynth_logo.png"></a>
 
         </div>
 
         </div>
 +
    </div>
 +
 +
    <div class='row align-items-center'>
 
         <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
 
         <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"
 
             <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>
 
                                                                 src="https://2019.igem.org/wiki/images/2/29/T--Tuebingen--neb_logo.png"></a>
 
         </div>
 
         </div>
    </div>
 
 
    <div class='row align-items-center'>
 
 
         <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
 
         <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
 
             <a href="https://www.promega.de/en/" target="_blank2"><img class="img-fluid"
 
             <a href="https://www.promega.de/en/" target="_blank2"><img class="img-fluid"
Line 11,365: Line 11,528:
 
             <a href="https://www.zymoresearch.de/" target="_blank2"><img class="img-fluid"
 
             <a href="https://www.zymoresearch.de/" target="_blank2"><img class="img-fluid"
 
                                                                         src="https://2019.igem.org/wiki/images/6/6e/T--Tuebingen--zymo_logo.png"></a>
 
                                                                         src="https://2019.igem.org/wiki/images/6/6e/T--Tuebingen--zymo_logo.png"></a>
 +
        </div>
 +
        <div 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>
  

Latest revision as of 20:07, 11 December 2019

GLP.exe - Software

Software

C3Pred - Cell-Penetrating Peptide Predictor

Our Software

Cell-penetrating peptides (CPPs) are short 4-30 amino acids long peptides, which possess the ability to transport different cargo over the cell membrane. These cargos include proteins, nanobodies, DNA molecules, and small molecule drugs. In recent years, numerous promising clinical and pre-clinical trials have been launched, with CPPs as a carrier for pharmacologically active small molecules.

They can be classified into three general groups: cationic, amphipathic, and hydrophobic CPPs. Each group of peptides has different physical-chemical properties and therefore differs in the internalization mechanism. The pathways that CPPs exploit to enter the cell can be divided into two larger groups, endocytic pathways, and direct cell penetration [2, 3]. Since there are different, not yet fully understood mechanisms involved, simple models, describing the relationship between sequence and function, are particularly challenging to generate. Hence, the discovery of novel CPPs and activity optimization is mostly relying on large screening approaches.

A generic square placeholder
Figure 1: Proteins can be fused to a cell-penetrating peptide (CPP) (left). CPPs allow proteins to penetrate cells via different mechanisms and can be used to transport proteins into cells or through cells. Proteins without a CPP can normally not penetrate cells (right).

Motivation

As part of our project, we planned to utilize cell-penetrating peptides (CPPs) to allow a cargo, the Exendin-4 protein, to be transported across a eukaryotic cell-layer. A challenging part of our project design was to decide on a specific CPP out of the tremendous variety of different transporting peptides. In October 2019, CPPsite 2.0, the largest database for CPPs, contained more than 1850 different peptide motifs, which are capable of delivering conjugates into cells. However, the CPPsite database only contains qualitative information about whether a peptide has a cell-penetrating activity, but no quantitative information about how efficient cargo is transported across the cell membrane.

Therefore we decided to generate a predictive software tool, which allows assigning a transport efficiency score to CPPs. This allows making educated decisions on the design process.

Overview of our tool

C3Pred is an easy-to-use software tool, which allows scientists to make design choices for their CPP-utilizing system based on quantitative transport activity scores. We put a strong emphasis on good usability for different kinds of users. Firstly, we implemented an intuitive browser-based graphical user interface for simple usability. Secondly, we also released our software tool as a Python package, which is easily installable for everyone using PIP, allowing other developers to incorporate our software tool into their scripts.

Short peptide sequences can be submitted to the program by either using a sequence string in FASTA-format, an Uniprot ID or an iGEM Registry ID of coding DNA sequences. Our tool computes a transport efficiency score for each sequence, which is automatically interpreted for the user by comparing it to well-characterized CPPs.

Why use our tool?

Our tool offers several distinct advantages for researchers interested in CPPs. First, our tool predicts real numerical values, which allows for a much more fine-tuned evaluation, as well as a comparison of CPP efficacy. Second, our tool is as user-friendly as it gets. The installation for a local version is trivial, which also allows for very simple integration into more advanced workflows. Moreover, our tool is accessible as a web app here.

Our very simple to use web interface offers three simple and useful options: Peptides can either be entered as raw text sequences, via the Uniprot Accession number, or the iGEM Registry ID. Third, since our algorithm instantly returns the CPP efficiency, several CPPs with different modifications or lengths can be quickly compared, allowing for the exploration as well as the design of novel CPPs.

Installation and usage of our tool

Our tool can be used on Linux, Windows and Mac OS. Please follow the installation instruction here.

When starting our tool, the landing page allows navigating to the three running modes (from protein sequence, Uniprot Accession number & iGEM Registry ID). Additional information about the running modes can be displayed by clicking on “more info”.

Prediction using a sequence string

To predict the transport effectivity of a FASTA-formatted amino acid string, please make sure that the sequence does only contain letters corresponding to the genetic code of the 20 standard amino acids. Moreover, please make sure that the submitted sequence is not longer than 40 residues.

Using a Uniprot Accession number

Since Uniprot is one of the largest publicly accessible resources for proteins, our tool allows using the Uniprot Accession number as input, which consists of 6-10 characters (e.g. Q86FU0). Information about the accession numbers can be found on the Uniprot Website.

Prediction using an iGEM Registry ID

Prediction on sequences in the iGEM registry can only be made on parts tagged in the subcategory “coding sequence”, otherwise the submitted identifier is rejected for the prediction. The DNA sequences are automatically translated into protein sequences.

A generic square placeholder
Figure 2: C3Pred usage demonstration.

Implementation

Input

C3Pred accepts three possible input formats for protein data:

  • FASTA-formatted sequences
  • UniProtKB Accession Number
  • iGEM Part ID

C3Pred automatically fetches and parses the information about the given identifiers using the UniProt website REST API or using the iGEM Registry API, respectively. For this function, an internet connection is required.

Input requirements

All proteins submitted to the tool must fulfill certain criteria, such that a transport efficiency score can be computed. CPPs usually have a length between 4-40 amino acids, thus only protein sequences with a length in this range are accepted as input. Moreover, only sequences containing the 20 standard amino acids should be used. Non-standard amino acid encodings like B encoding for asparagine/aspartate or S for selenocysteine can also be parsed and used for prediction, but this feature is experimental. Since information about those amino acids is not backed up by the training data, results produced for those peptides must be interpreted with caution.

For iGEM part IDs further requirements need to be fulfilled, such that a prediction can be made. C3Pred only accepts parts defined as coding sequences. If the sequence is coding, our tool automatically translates it into a protein sequence.

Output

For every peptide, a transport efficiency score is computed. For peptides without a carrier property, the score is close to zero. For extremely active peptides, the score is close to 250-300. The values computed for different peptides can be directly compared. Since the output is a dimensionless numerical value, a straightforward classification into no/low/medium/high activity is provided for the user to facilitate the interpretation process. High activities are defined by being in the upper 25 percentile (activity value: 80.08) of all CPP motifs. Medium activities are defined by being in the upper 50 percentile (activity value: 40.15). Moreover, a range of activity values of frequently used CPPs in the literature is also provided in the GUI for direct comparison.

A generic square placeholder
Figure 3: The workflow of C3Pred: Information about the protein can be obtained from a sequence string direct.y, the iGEM part ID of coding sequences or using a UniProtKB accession number. The protein is then used as input for our machine learning model and the activity score is computed as output.

Core Algorithm

XGBoost

C3PRed is based on gradient boosted trees using the implementation of the XGBoost library [5]. Gradient boosted trees are a commonly used algorithm for supervised machine learning problems. Key advantages are their inherently fast training speed and high accuracy for problems, which cannot be solved using deep learning techniques, due to sparse datasets. The key idea of the gradient boosted trees algorithm is to map a set of input features onto a single numerical value. In our case, the input is the encoded protein sequence and the predicted numerical value is the activity scores. For this purpose, numerous decision trees are generated, which are iteratively added to the model, such that with each addition the model improves.

<

Data

To train our model we used the publicly available dataset by Ramaker et al. 2018, consisting of transport efficiency values for 474 short peptide motifs [6]. In their experiments, short peptides were coupled with a fluorophore and the transport over the membrane was then measured using fluorescence as a read-out. The transport efficiency data for each peptide were log2-transformed to facilitate the fitting process.

Encoding

To encode the peptides for the machine learning step, we chose an extended version of the BLOMAP encoding. BLOMAP is a machine-learning oriented representation of amino acids [7]. It is based on a transformed BLOSUM substitution matrix. The encoding is extended by numerical values by physicochemical properties of each amino acid, including flexibility, weight, isoelectric point, hydrophobicity, polarity, and area.

Each peptide is represented as the set of all possible sliding windows of the size of 14 residues. Shorter peptides are padded at the N- and C-terminus. An advantage of such an encoding is that after the training steps, it is possible to analyze the final prediction tool for the most influential features. This allows a better understanding of the transport mechanism and the general characteristics of CPPs.

Training

For each sliding window of a peptide, an activity score is computed. The total activity of the peptide is determined by the mean of all activity values of all sliding windows. Our CPP transport activity prediction model was fitted to optimize Pearson's correlation coefficient of the predicted values against the experimentally derived ones. To find good hyperparameters of the gradient boosted trees algorithm, a random search was performed. The evaluation of the performance of our predictor was performed using a 10-fold cross-validation. In a k-fold cross-validation, the data is split into k-subsets of equal size. The predictor is tested k times, with k-1 subsets of the data in the training set and 1 subset in the test data. In each iteration, the single subset which is not part of the training set is used for evaluation. In the end, each of the k subsets has been in the training set exactly once.

Placeholder

Performance

Predicted activity values of the 10-fold cross-validation are plotted against the experimentally derived ones. Each point represents a peptide. If the predictions would be perfectly accurate, all points would be on the diagonal. Our algorithm achieved a Pearson correlation of 0.804, which is considered very good.

A generic square placeholder
Figure 4: Prediction results of C3Pred compared to experimentally derived values. Each point represents a protein. The correlation between predicted and the experimental values is 0.804.

The importance of each feature of the BLOMAP encoding is shown in this visualization. The higher the values, the greater is the importance of the feature on the results of the prediction. The feature isoelectric point is the most important one, which indicates that charged amino acids play the most important role in high activity values.

A generic square placeholder
Figure 5: Feature importance plot of the XGBoost model. Each bar represents one of the features of the BLOMAP encoding. The important feature for the prediction is the isoelectric point, indicating the most influential role being charge.

Results

Validation against experimental data

We used the data obtained from the experimental work of previous iGEM teams to validate the results of our prediction tool. In the past years, numerous teams have worked with CPPs. Some of them conducted experiments to compare the transport efficiency of the peptides, which again indicates the potential usefulness of our tool to other teams.

ATOMS Turkiye

The ATOMS Turkiye team of 2013 compared the efficiency of the two CPPs TAT and MPG to transport an apoptosis-inducing protein into different cell lines. Their findings of TAT fusion protein being better transported into the cell than the MPG fusion protein, are in accordance with our predicted values.

Our predicted activity values (higher is better):
TAT: 45.97
MPG: 34.27

Results of the ATOMS Turkiye team

DLUT-China

The iGEM Team DLUT-China of 2018 conducted a similar comparative experiment for multiple CPPs. They compared R8, TAT, Pep-1 and cyclic heptapeptide DNP.
Their results for R8, TAT and Pep-1 are in accordance with our predictions. R8 was the most transported peptides in their experiments and also scored best in our prediction. However, our tool predicts a bad score for the cyclic heptapeptide DNP, which shows high transport efficiency in their experiment. This can be explained by the fact that our tool was trained only with linear protein sequences containing the standard 20 amino acids. Special peptides, such as this one, probably cannot be predicted by our tool correctly.

Our predicted activity values (higher is better):
R8: 52.50
TAT: 45.97
Pep-1: 45.12
cyclic heptapeptide DNP: 7.69

Results iGEM Team DLUT-China

How our software influenced our project

Validation against experimental data

We used the results of C3Pred to analyze CPPs to decide on a suitable CPP for our project. We analyzed a series of CPP which were already present in the iGEM Registry and additional peptides which were frequently referred to in the literature.

Penetratin : 153.16
Tp10 : 100.68
TAT: 45.97

Since Penetratin showed the highest scores compared to the other parts available in the iGEM Registry, we decided to select this specific CPP as the carrier for the Exendin-4 protein of our project.

Moreover, we computed an elevated transport activity for the CPP fusion protein TAT-LK15 , which has been reported to enhance the properties of TAT.

TAT-LK15 : 228.81

How our software influenced our project (2.0)

We used the results of C3Pred to analyze a series of CPPs to decide on a suitable peptide for our project.

Details on the selection process can be found on the modeling page.

hallo123

hallo123

hallo123

hallo123

hallo123