Loading menubar.....

Difference between revisions of "Team:Tuebingen/einweiterer"

 
(17 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
<html lang="en" dir="ltr" class="client-nojs">
+
<html lang="en" dir="ltr" class="client-nojs" xmlns="http://www.w3.org/1999/html">
 +
 
 +
<meta charset="UTF-8"/>
 +
 
 +
<style>
 +
        /* Paste this css to your style sheet file or under head tag */
 +
        /* This only works with JavaScript,
 +
        if it's not present, don't show loader */
 +
        .js #loader {
 +
            display: block;
 +
            position: absolute;
 +
            left: 100px;
 +
            top: 0;
 +
        }
 +
 
 +
        .se-pre-con {
 +
            position: fixed;
 +
            left: 0px;
 +
            top: 0px;
 +
            width: 100%;
 +
            height: 100%;
 +
            z-index: 9999;
 +
            background: #2B2B35;
 +
        }
 +
 
 +
        .se-pre-con img {
 +
            width: 40%;
 +
            height: 40%;
 +
            margin-left: 30%;
 +
            margin-top: 15%;
 +
        }
 +
 
 +
        @media screen and (min-width: 1500px ) {
 +
            .se-pre-con img {
 +
                margin-top: 20%;
 +
                width: 25%;
 +
                height: 15%;
 +
                margin-left: 35%;
 +
            }
 +
        }
 +
 
 +
        @media screen and (max-width: 1100px ) {
 +
            .se-pre-con img {
 +
                margin-top: 20%;
 +
                height: 30%;
 +
                width: 50%;
 +
                margin-left: 25%;
 +
            }
 +
        }
 +
 
 +
        @media screen and (max-width: 700px ) {
 +
            .se-pre-con img {
 +
                margin-top: 18%;
 +
                height: 20%;
 +
            }
 +
        }
 +
    </style>
 +
</head>
 +
<body>
 +
<div class="se-pre-con">
 +
    <img src="https://2019.igem.org/wiki/images/8/83/T--Tuebingen--preloader.gif">
 +
</div>
 +
<script src="https://2019.igem.org/Team:Tuebingen/jqueryLoadJS?action=raw&ctype=text/javascript"></script>
 +
<script src="https://2019.igem.org/Team:Tuebingen/jmodernizerJS?action=raw&ctype=text/javascript"></script>
 +
<script>
 +
    $(window).load(function () {
 +
        setTimeout(removeLoader, 1000);
 +
    }); //wait for page load PLUS one seconds.
 +
    function removeLoader() {
 +
        $(".se-pre-con").fadeOut(500, function () {
 +
            // fadeOut complete. Remove the loading div
 +
            $(".se-pre-con").remove(); //makes page more lightweight
 +
        });
 +
    }
 +
</script>
 +
</body>
  
−
<meta charset="UTF-8" content="width=device-width, initial-scale=1.0"/>
 
 
<style>
 
<style>
 
     /*!
 
     /*!
Line 89: Line 163:
 
     p {
 
     p {
 
         margin-top: 0;
 
         margin-top: 0;
−
         margin-bottom: 1rem
+
         margin-bottom: 1rem;
 +
        color: #F4F0DE;
 
     }
 
     }
  
Line 1,639: Line 1,714:
 
         .offset-xl-11 {
 
         .offset-xl-11 {
 
             margin-left: 91.666667%
 
             margin-left: 91.666667%
 +
        }
 +
    }
 +
 +
    .veggie {
 +
        width: 100%;
 +
        max-width: 100%;
 +
        margin-bottom: 1rem;
 +
        background-color: transparent;
 +
        z-index:100;
 +
    }
 +
    .veggie td,
 +
    .veggie th {
 +
        padding: .75rem;
 +
        vertical-align: top;
 +
        border-top: 1px solid #F4F0DE;
 +
        color: #F4F0DE;
 +
        border-bottom: 1px solid #F4F0DE;
 +
        z-index:100;
 +
    }
 +
    .veggie th {
 +
        background-color: #2ecc71 !important;
 +
        color: #232323 !important;
 +
        z-index:100;
 +
    }
 +
    .veggie caption {
 +
        color: #adb3b7;
 +
        z-index:100;
 +
    }
 +
    .veggie thead th {
 +
        vertical-align: bottom;
 +
        border-bottom: 2px solid #dee2e6;
 +
        z-index:100;
 +
    }
 +
    .veggie tbody+tbody {
 +
        border-top: 2px solid #dee2e6;
 +
        z-index:100;
 +
    }
 +
 +
    @media screen and (max-width: 800px) {
 +
        .veggie {
 +
            font-size: xx-small;
 +
            z-index:100;
 
         }
 
         }
 
     }
 
     }
Line 1,841: Line 1,958:
 
             display: block;
 
             display: block;
 
             width: 100%;
 
             width: 100%;
−
             overflow-x: auto;
+
             overflow-x: break-words;
 
             -webkit-overflow-scrolling: touch;
 
             -webkit-overflow-scrolling: touch;
 
             -ms-overflow-style: -ms-autohiding-scrollbar
 
             -ms-overflow-style: -ms-autohiding-scrollbar
Line 1,855: Line 1,972:
 
             display: block;
 
             display: block;
 
             width: 100%;
 
             width: 100%;
−
             overflow-x: auto;
+
             overflow-x: break-words;
 
             -webkit-overflow-scrolling: touch;
 
             -webkit-overflow-scrolling: touch;
 
             -ms-overflow-style: -ms-autohiding-scrollbar
 
             -ms-overflow-style: -ms-autohiding-scrollbar
Line 1,869: Line 1,986:
 
             display: block;
 
             display: block;
 
             width: 100%;
 
             width: 100%;
−
             overflow-x: auto;
+
             overflow-x: break-words;
 
             -webkit-overflow-scrolling: touch;
 
             -webkit-overflow-scrolling: touch;
 
             -ms-overflow-style: -ms-autohiding-scrollbar
 
             -ms-overflow-style: -ms-autohiding-scrollbar
Line 2,902: Line 3,019:
 
     .btn-outline-dark:not(:disabled):not(.disabled).active:focus, .btn-outline-dark:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-dark.dropdown-toggle:focus {
 
     .btn-outline-dark:not(:disabled):not(.disabled).active:focus, .btn-outline-dark:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-dark.dropdown-toggle:focus {
 
         box-shadow: 0 0 0 .2rem rgba(52, 58, 64, .5)
 
         box-shadow: 0 0 0 .2rem rgba(52, 58, 64, .5)
−
    }
 
−
 
−
    .btn-link {
 
−
        font-weight: 400;
 
−
        color: #007bff;
 
−
        background-color: transparent
 
−
    }
 
−
 
−
    .btn-link:hover {
 
−
        color: #0056b3;
 
−
        text-decoration: underline;
 
−
        background-color: transparent;
 
−
        border-color: transparent
 
−
    }
 
−
 
−
    .btn-link.focus, .btn-link:focus {
 
−
        text-decoration: underline;
 
−
        border-color: transparent;
 
−
        box-shadow: none
 
−
    }
 
−
 
−
    .btn-link.disabled, .btn-link:disabled {
 
−
        color: #6c757d;
 
−
        pointer-events: none
 
 
     }
 
     }
  
Line 5,983: Line 6,076:
  
 
     .bg-dark {
 
     .bg-dark {
−
         background-color: #343a40 !important
+
         background-color: #232323 !important
 
     }
 
     }
  
Line 9,209: Line 9,302:
  
  
−
     /* sponsor footer */
+
     /* sponsor foooter */
 
     .sponsorLogo img {
 
     .sponsorLogo img {
 
         padding: 8px;
 
         padding: 8px;
Line 9,232: Line 9,325:
  
 
     .dropdown-menu {
 
     .dropdown-menu {
−
         background-color: rgba(100, 100, 100, 1);
+
         background-color: #232323;
 
     }
 
     }
  
Line 9,246: Line 9,339:
 
/*++++++++++++++++++++++++++++++++
 
/*++++++++++++++++++++++++++++++++
 
contents CSS ++++++++++++++++++++++++++++++*/
 
contents CSS ++++++++++++++++++++++++++++++*/
−
* {
+
    * {
−
  box-sizing: border-box;
+
        box-sizing: border-box;
−
}
+
    }
  
  
−
.glpContainer {
+
    .glpContainer {
−
  display: flex;
+
        display: flex;
−
  width: 100%;
+
        width: 100%;
−
  margin: 0;
+
        margin: 0;
−
  padding: 1em auto 0;
+
        padding: 1em auto 0;
−
}
+
    }
  
−
.glpContainer > * {
+
    .glpContainer > * {
−
  padding: 20px 25px;
+
        padding: 20px 25px;
−
}
+
    }
−
/* Both Needed */
+
−
#glpContentsOuter{
+
−
  position: relative;
+
−
  flex-basis: 15vw;
+
−
  width: 15vw;
+
  
−
}
+
    /* Both Needed */
−
/* Both Needed */
+
    #glpContentsOuter {
−
.table-of-contents {
+
        position: relative;
−
  position: relative;
+
        flex-basis: 15vw;
−
  flex-basis: 15vw;
+
        width: 15vw;
−
  width: 15vw;
+
  
−
}
+
    }
−
.stickyContents {
+
−
  position: fixed;
+
−
  top: 120px;
+
−
}
+
−
.table-of-contents p {
+
−
  text-transform: uppercase;
+
−
  letter-spacing: 0.125em;
+
−
  color: #555;
+
−
}
+
  
−
.table-of-contents ul {
+
    /* Both Needed */
−
  position: fixed;
+
    .table-of-contents {
−
  /* Chrome (asshole) */
+
        position: relative;
−
  position: sticky;
+
        flex-basis: 15vw;
−
  /* Firefox */
+
        width: 15vw;
−
  margin-top: 2em;
+
−
  top: 4em;
+
−
}
+
  
−
h1:first-child {
+
    }
−
  margin-top: 0;
+
−
}
+
  
−
.post-content {
+
    .stickyContents {
−
  flex-basis: 70vw;
+
        position: fixed;
−
  max-width: 100%;
+
        top: 120px;
−
  margin-left: 5vw;
+
    }
−
}
+
−
/* important to the link position of the headings */
+
−
.post-content h1{
+
−
padding-top: 30px;
+
−
color:rgba(0, 158, 198,1);
+
−
}
+
  
−
/* important to the link position of the headings */
+
    .table-of-contents p {
−
.post-content h2{
+
        text-transform: uppercase;
−
padding-top: 150px;
+
        letter-spacing: 0.125em;
−
color:rgba(0, 158, 198,1);
+
        color: #fff;
−
}
+
    }
  
−
/* link color */
+
    .table-of-contents ul {
−
.post-content a{
+
        position: fixed;
−
color:#009EC6;
+
        /* Chrome (asshole) */
−
}
+
        position: sticky;
 +
        /* Firefox */
 +
        margin-top: 2em;
 +
        top: 4em;
 +
    }
  
−
#glpreferences a{
+
    h1:first-child {
−
color:#009EC6;
+
        margin-top: 0;
−
}
+
    }
  
 +
    .post-content {
 +
        flex-basis: 70vw;
 +
        max-width: 100%;
 +
        margin-left: 5vw;
 +
    }
  
−
/* TOC part */
+
    /* important to the link position of the headings */
 +
    .post-content h1 {
 +
        padding-top: 30px;
 +
        color: #2ecc71;
 +
    }
  
−
.table-of-contents svg {
+
    /* important to the link position of the headings */
 +
    .post-content h2 {
 +
        padding-top: 150px;
 +
        color: #2ecc71;
 +
    }
 +
 
 +
    /* link color */
 +
    .post-content a {
 +
        color: #2ecc71;
 +
    }
 +
 
 +
    #glpreferences a {
 +
        color: #F4F0DE!important
 +
    }
 +
 
 +
    ol li {
 +
  counter-increment: list;
 +
  list-style-type: none;
 +
  position: relative;
 +
}
 +
/* Outout the numbers using the counter() function, but use a custom color, and position the numbers how we want */
 +
    ol li:before {
 +
  color: #F4F0DE;
 +
  content: counter(list) ".";
 +
  left:-32px;
 
   position: absolute;
 
   position: absolute;
−
   left: 0;
+
   text-align: right;
−
   top: 50%;
+
   width: 26px;
−
  bottom: auto;
+
−
  display: none;
+
−
  stroke: #009EC6;
+
−
  transform: translateY(-50%);
+
 
}
 
}
  
−
.toc-reading svg {
 
−
  display: block;
 
−
}
 
  
−
.table-of-contents ul {
+
    /* TOC part */
−
  width: 200px;
+
−
  counter-reset: articles;
+
−
  padding: 0;
+
−
  margin-left: 0;
+
−
}
+
  
−
.table-of-contents li {
+
    .table-of-contents svg {
−
  display: block;
+
        position: absolute;
−
  counter-increment: articles;
+
        left: 0;
−
}
+
        top: 50%;
 +
        bottom: auto;
 +
        display: none;
 +
        stroke: #2ecc71;
 +
        transform: translateY(-50%);
 +
    }
  
−
.table-of-contents li + li {
+
    .toc-reading svg {
−
  margin-top: 2em;
+
        display: block;
−
}
+
    }
  
−
.table-of-contents a {
+
    .table-of-contents ul {
−
  display: block;
+
        width: 200px;
−
  padding: 0 1.1em 0 3.2em;
+
        counter-reset: articles;
−
  position: relative;
+
        padding: 0;
−
  text-decoration: none;
+
        margin-left: 0;
−
  color: #333;
+
    }
−
  font-weight: bold;
+
−
}
+
  
−
a.toc-reading,
+
    .table-of-contents li {
−
a.toc-already-read.toc-reading {
+
        display: block;
−
  color: #009EC6;
+
        counter-increment: articles;
−
  opacity: 1;
+
    }
−
}
+
  
−
a.toc-already-read {
+
    .table-of-contents li + li {
−
  opacity: 0.4;
+
        margin-top: 2em;
−
}
+
    }
  
−
.table-of-contents a:before {
+
    .table-of-contents a {
−
  content: counter(articles, decimal);
+
        display: block;
−
  position: absolute;
+
        padding: 0 1.1em 0 3.2em;
−
  bottom: auto;
+
        position: relative;
−
  left: 0;
+
        text-decoration: none;
−
  top: 50%;
+
        color: #fff;
−
  width: 36px;
+
        font-weight: bold;
−
  height: 36px;
+
    }
−
  line-height: 34px;
+
−
  text-align: center;
+
−
  transform: translateY(-50%);
+
−
  transition: background-color 0.3s ease 0s, color 0.3s ease 0s;
+
−
  border-radius: 50%;
+
−
  box-shadow: 0 0 0 1px #d9d9d9 inset;
+
−
  color: #4d4d4d;
+
−
}
+
  
−
.post-content .row{
+
    a.toc-reading,
−
  text-align: justify;
+
    a.toc-already-read.toc-reading {
−
}
+
        color: #2ecc71;
−
/*++++++++++++++++++++++++++++++++
+
        opacity: 1;
 +
    }
 +
 
 +
    a.toc-already-read {
 +
        opacity: 0.6;
 +
    }
 +
 
 +
    .table-of-contents a:before {
 +
        content: counter(articles, decimal);
 +
        position: absolute;
 +
        bottom: auto;
 +
        left: 0;
 +
        top: 50%;
 +
        width: 36px;
 +
        height: 36px;
 +
        line-height: 34px;
 +
        text-align: center;
 +
        transform: translateY(-50%);
 +
        transition: background-color 0.3s ease 0s, color 0.3s ease 0s;
 +
        box-shadow: 0 3px 5px 0 black;
 +
        color: #fff;
 +
    }
 +
 
 +
    .post-content .row {
 +
        text-align: justify;
 +
    }
 +
 
 +
    /*++++++++++++++++++++++++++++++++
 
contents End ++++++++++++++++++++++++++++++*/
 
contents End ++++++++++++++++++++++++++++++*/
  
Line 9,594: Line 9,707:
 
     /*++++++++++++++++++++++++++++++++
 
     /*++++++++++++++++++++++++++++++++
 
gallery End ++++++++++++++++++++++++++++++*/
 
gallery End ++++++++++++++++++++++++++++++*/
−
@media only screen and (max-width: 575.98px) {}
 
  
−
@media only screen and (max-width: 767.98px) {
+
    @media only screen and (max-width: 575.98px) {
−
.pictureTitle{
+
    }
−
height: 200px;
+
−
}
+
−
.pictureTitle .display-2{
+
−
font-size: 2rem;
+
−
}
+
  
−
.pictureTitle h4{
+
    @media only screen and (max-width: 767.98px) {
−
font-size: 1rem;
+
        .pictureTitle {
−
}
+
            height: 200px;
 +
        }
  
−
#glpContentsOuter{
+
        .pictureTitle .display-2 {
−
display: none;
+
            font-size: 2rem;
−
}
+
        }
−
.glpContainer {
+
−
  width: 100%;
+
−
  margin: 0;
+
−
  padding: 0 auto;
+
−
}
+
  
−
.glpContainer > * {
+
        .pictureTitle h4 {
−
  padding: 0;
+
            font-size: 1rem;
−
}
+
        }
−
.post-content {
+
−
  flex-basis: 90vw;
+
−
  max-width: 100%;
+
−
  margin:0 3vw;
+
−
}
+
−
/* important to the link position of the headings */
+
−
.post-content h2{
+
−
padding-top: 50px;
+
−
}
+
−
table{
+
−
font-size: .8rem;
+
−
}
+
−
.quote-card p {
+
−
  font-size: 1rem !important;
+
−
}
+
−
}
+
  
 +
        #glpContentsOuter {
 +
            display: none;
 +
        }
  
−
@media only screen and (max-width: 1199.98px) {
+
        .glpContainer {
 +
            width: 100%;
 +
            margin: 0;
 +
            padding: 0 auto;
 +
        }
  
−
}
+
        .glpContainer > * {
 +
            padding: 0;
 +
        }
  
−
@media only screen and (max-width: 1400px) {
+
        .post-content {
−
.table-of-contents a{
+
            flex-basis: 90vw;
−
font-size: 0.8rem;
+
            max-width: 100%;
−
}
+
            margin: 0 3vw;
−
.table-of-contents li + li{
+
        }
−
margin-top: 1.5em;
+
−
}
+
−
}
+
  
−
</style>
+
        /* important to the link position of the headings */
 +
        .post-content h2 {
 +
            padding-top: 50px;
 +
        }
  
 +
        table {
 +
            font-size: .8rem;
 +
        }
  
 +
        .quote-card p {
 +
            font-size: 1rem !important;
 +
        }
 +
    }
  
 +
 +
    @media only screen and (max-width: 1199.98px) {
 +
 +
    }
 +
 +
    @media only screen and (max-width: 1400px) {
 +
        .table-of-contents a {
 +
            font-size: 0.8rem;
 +
        }
 +
 +
        .table-of-contents li + li {
 +
            margin-top: 1.5em;
 +
        }
 +
    }
 +
</style>
 
     <head>
 
     <head>
 
         <title>GLP.exe</title>
 
         <title>GLP.exe</title>
Line 9,660: Line 9,778:
 
         <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" href="https://2019.igem.org/Team:Tuebingen/aosCSS?action=raw&ctype=text/css" />
 
 
         <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" type="text/css"/>
−
         <script src="https://2019.igem.org/Team:Tuebingen/jqueryminjs?action=raw&amp;ctype=text/javascript"></script>
+
         <style>
−
        <script src="https://2019.igem.org/Team:Tuebingen/popperjs?action=raw&amp;ctype=text/javascript"></script>
+
            .mfp-bg {
−
        <script src="https://2019.igem.org/Team:Tuebingen/bootstrapjs?action=raw&amp;ctype=text/javascript"></script>
+
                top: 0;
−
        <script src="https://2019.igem.org/Template:Tuebingen/GLPexeJS?action=raw&amp;ctype=text/javascript"></script>
+
                left: 0;
 +
                width: 100%;
 +
                height: 100%;
 +
                z-index: 1042;
 +
                overflow: hidden;
 +
                position: fixed;
 +
                background: #0b0b0b;
 +
                opacity: 0.8;
 +
            }
 +
 
 +
            .mfp-wrap {
 +
                top: 0;
 +
                left: 0;
 +
                width: 100%;
 +
                height: 100%;
 +
                z-index: 1043;
 +
                position: fixed;
 +
                outline: none !important;
 +
                -webkit-backface-visibility: hidden;
 +
            }
 +
 
 +
            .mfp-container {
 +
                text-align: center;
 +
                position: absolute;
 +
                width: 100%;
 +
                height: 100%;
 +
                left: 0;
 +
                top: 0;
 +
                padding: 0 8px;
 +
                box-sizing: border-box;
 +
            }
 +
 
 +
            .mfp-container:before {
 +
                content: '';
 +
                display: inline-block;
 +
                height: 100%;
 +
                vertical-align: middle;
 +
            }
 +
 
 +
            .mfp-align-top .mfp-container:before {
 +
                display: none;
 +
            }
 +
 
 +
            .mfp-content {
 +
                position: relative;
 +
                display: inline-block;
 +
                vertical-align: middle;
 +
                margin: 0 auto;
 +
                text-align: left;
 +
                z-index: 1045;
 +
            }
 +
 
 +
            .mfp-inline-holder .mfp-content,
 +
            .mfp-ajax-holder .mfp-content {
 +
                width: 100%;
 +
                cursor: auto;
 +
            }
 +
 
 +
            .mfp-ajax-cur {
 +
                cursor: progress;
 +
            }
 +
 
 +
            .mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
 +
                cursor: -moz-zoom-out;
 +
                cursor: -webkit-zoom-out;
 +
                cursor: zoom-out;
 +
            }
 +
 
 +
            .mfp-zoom {
 +
                cursor: pointer;
 +
                cursor: -webkit-zoom-in;
 +
                cursor: -moz-zoom-in;
 +
                cursor: zoom-in;
 +
            }
 +
 
 +
            .mfp-auto-cursor .mfp-content {
 +
                cursor: auto;
 +
            }
 +
 
 +
            .mfp-close,
 +
            .mfp-arrow,
 +
            .mfp-preloader,
 +
            .mfp-counter {
 +
                -webkit-user-select: none;
 +
                -moz-user-select: none;
 +
                user-select: none;
 +
            }
 +
 
 +
            .mfp-loading.mfp-figure {
 +
                display: none;
 +
            }
 +
 
 +
            .mfp-hide {
 +
                display: none !important;
 +
            }
 +
 
 +
            .mfp-preloader {
 +
                color: #CCC;
 +
                position: absolute;
 +
                top: 50%;
 +
                width: auto;
 +
                text-align: center;
 +
                margin-top: -0.8em;
 +
                left: 8px;
 +
                right: 8px;
 +
                z-index: 1044;
 +
            }
 +
 
 +
            .mfp-preloader a {
 +
                color: #CCC;
 +
            }
 +
 
 +
            .mfp-preloader a:hover {
 +
                color: #FFF;
 +
            }
 +
 
 +
            .mfp-s-ready .mfp-preloader {
 +
                display: none;
 +
            }
 +
 
 +
            .mfp-s-error .mfp-content {
 +
                display: none;
 +
            }
 +
 
 +
            button.mfp-close,
 +
            button.mfp-arrow {
 +
                overflow: visible;
 +
                cursor: pointer;
 +
                background: transparent;
 +
                border: 0;
 +
                -webkit-appearance: none;
 +
                display: block;
 +
                outline: none;
 +
                padding: 0;
 +
                z-index: 1046;
 +
                box-shadow: none;
 +
                touch-action: manipulation;
 +
            }
 +
 
 +
            button::-moz-focus-inner {
 +
                padding: 0;
 +
                border: 0;
 +
            }
 +
 
 +
            .mfp-close {
 +
                width: 44px;
 +
                height: 44px;
 +
                line-height: 44px;
 +
                position: absolute;
 +
                right: 0;
 +
                top: 0;
 +
                text-decoration: none;
 +
                text-align: center;
 +
                opacity: 0.65;
 +
                padding: 0 0 18px 10px;
 +
                color: #FFF;
 +
                font-style: normal;
 +
                font-size: 28px;
 +
                font-family: Arial, Baskerville, monospace;
 +
            }
 +
 
 +
            .mfp-close:hover,
 +
            .mfp-close:focus {
 +
                opacity: 1;
 +
            }
 +
 
 +
            .mfp-close:active {
 +
                top: 1px;
 +
            }
 +
 
 +
            .mfp-close-btn-in .mfp-close {
 +
                color: #333;
 +
            }
 +
 
 +
            .mfp-image-holder .mfp-close,
 +
            .mfp-iframe-holder .mfp-close {
 +
                color: #FFF;
 +
                right: -6px;
 +
                text-align: right;
 +
                padding-right: 6px;
 +
                width: 100%;
 +
            }
 +
 
 +
            .mfp-counter {
 +
                position: absolute;
 +
                top: 0;
 +
                right: 0;
 +
                color: #CCC;
 +
                font-size: 12px;
 +
                line-height: 18px;
 +
                white-space: nowrap;
 +
            }
 +
 
 +
            .mfp-arrow {
 +
                position: absolute;
 +
                opacity: 0.65;
 +
                margin: 0;
 +
                top: 50%;
 +
                margin-top: -55px;
 +
                padding: 0;
 +
                width: 90px;
 +
                height: 110px;
 +
                -webkit-tap-highlight-color: transparent;
 +
            }
 +
 
 +
            .mfp-arrow:active {
 +
                margin-top: -54px;
 +
            }
 +
 
 +
            .mfp-arrow:hover,
 +
            .mfp-arrow:focus {
 +
                opacity: 1;
 +
            }
 +
 
 +
            .mfp-arrow:before,
 +
            .mfp-arrow:after {
 +
                content: '';
 +
                display: block;
 +
                width: 0;
 +
                height: 0;
 +
                position: absolute;
 +
                left: 0;
 +
                top: 0;
 +
                margin-top: 35px;
 +
                margin-left: 35px;
 +
                border: medium inset transparent;
 +
            }
 +
 
 +
            .mfp-arrow:after {
 +
                border-top-width: 13px;
 +
                border-bottom-width: 13px;
 +
                top: 8px;
 +
            }
 +
 
 +
            .mfp-arrow:before {
 +
                border-top-width: 21px;
 +
                border-bottom-width: 21px;
 +
                opacity: 0.7;
 +
            }
 +
 
 +
            .mfp-arrow-left {
 +
                left: 0;
 +
            }
 +
 
 +
            .mfp-arrow-left:after {
 +
                border-right: 17px solid #FFF;
 +
                margin-left: 31px;
 +
            }
 +
 
 +
            .mfp-arrow-left:before {
 +
                margin-left: 25px;
 +
                border-right: 27px solid #3F3F3F;
 +
            }
 +
 
 +
            .mfp-arrow-right {
 +
                right: 0;
 +
            }
 +
 
 +
            .mfp-arrow-right:after {
 +
                border-left: 17px solid #FFF;
 +
                margin-left: 39px;
 +
            }
 +
 
 +
            .mfp-arrow-right:before {
 +
                border-left: 27px solid #3F3F3F;
 +
            }
 +
 
 +
            .mfp-iframe-holder {
 +
                padding-top: 40px;
 +
                padding-bottom: 40px;
 +
            }
 +
 
 +
            .mfp-iframe-holder .mfp-content {
 +
                line-height: 0;
 +
                width: 100%;
 +
                max-width: 900px;
 +
            }
 +
 
 +
            .mfp-iframe-holder .mfp-close {
 +
                top: -40px;
 +
            }
 +
 
 +
            .mfp-iframe-scaler {
 +
                width: 100%;
 +
                height: 0;
 +
                overflow: hidden;
 +
                padding-top: 56.25%;
 +
            }
 +
 
 +
            .mfp-iframe-scaler iframe {
 +
                position: absolute;
 +
                display: block;
 +
                top: 0;
 +
                left: 0;
 +
                width: 100%;
 +
                height: 100%;
 +
                box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
 +
                background: #000;
 +
            }
 +
 
 +
            /* Main image in popup */
 +
            img.mfp-img {
 +
                width: auto;
 +
                max-width: 100%;
 +
                height: auto;
 +
                display: block;
 +
                line-height: 0;
 +
                box-sizing: border-box;
 +
                padding: 40px 0 40px;
 +
                margin: 0 auto;
 +
            }
 +
 
 +
            /* The shadow behind the image */
 +
            .mfp-figure {
 +
                line-height: 0;
 +
            }
 +
 
 +
            .mfp-figure:after {
 +
                content: '';
 +
                position: absolute;
 +
                left: 0;
 +
                top: 40px;
 +
                bottom: 40px;
 +
                display: block;
 +
                right: 0;
 +
                width: auto;
 +
                height: auto;
 +
                z-index: -1;
 +
                box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
 +
                background: #444;
 +
            }
 +
 
 +
            .mfp-figure small {
 +
                color: #BDBDBD;
 +
                display: block;
 +
                font-size: 12px;
 +
                line-height: 14px;
 +
            }
 +
 
 +
            .mfp-figure figure {
 +
                margin: 0;
 +
            }
 +
 
 +
            .mfp-bottom-bar {
 +
                margin-top: -36px;
 +
                position: absolute;
 +
                top: 100%;
 +
                left: 0;
 +
                width: 100%;
 +
                cursor: auto;
 +
            }
 +
 
 +
            .mfp-title {
 +
                text-align: left;
 +
                line-height: 18px;
 +
                color: #F3F3F3;
 +
                word-wrap: break-word;
 +
                padding-right: 36px;
 +
            }
 +
 
 +
            .mfp-image-holder .mfp-content {
 +
                max-width: 100%;
 +
            }
 +
 
 +
            .mfp-gallery .mfp-image-holder .mfp-figure {
 +
                cursor: pointer;
 +
            }
 +
 
 +
            @media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
 +
                /**
 +
      * Remove all paddings around the image on small screen
 +
      */
 +
                .mfp-img-mobile .mfp-image-holder {
 +
                    padding-left: 0;
 +
                    padding-right: 0;
 +
                }
 +
 
 +
                .mfp-img-mobile img.mfp-img {
 +
                    padding: 0;
 +
                }
 +
 
 +
                .mfp-img-mobile .mfp-figure:after {
 +
                    top: 0;
 +
                    bottom: 0;
 +
                }
 +
 
 +
                .mfp-img-mobile .mfp-figure small {
 +
                    display: inline;
 +
                    margin-left: 5px;
 +
                }
 +
 
 +
                .mfp-img-mobile .mfp-bottom-bar {
 +
                    background: rgba(0, 0, 0, 0.6);
 +
                    bottom: 0;
 +
                    margin: 0;
 +
                    top: auto;
 +
                    padding: 3px 5px;
 +
                    position: fixed;
 +
                    box-sizing: border-box;
 +
                }
 +
 
 +
                .mfp-img-mobile .mfp-bottom-bar:empty {
 +
                    padding: 0;
 +
                }
 +
 
 +
                .mfp-img-mobile .mfp-counter {
 +
                    right: 5px;
 +
                    top: 3px;
 +
                }
 +
 
 +
                .mfp-img-mobile .mfp-close {
 +
                    top: 0;
 +
                    right: 0;
 +
                    width: 35px;
 +
                    height: 35px;
 +
                    line-height: 35px;
 +
                    background: rgba(0, 0, 0, 0.6);
 +
                    position: fixed;
 +
                    text-align: center;
 +
                    padding: 0;
 +
                }
 +
            }
 +
 
 +
            @media all and (max-width: 900px) {
 +
                .mfp-arrow {
 +
                    -webkit-transform: scale(0.75);
 +
                    transform: scale(0.75);
 +
                }
 +
 
 +
                .mfp-arrow-left {
 +
                    -webkit-transform-origin: 0;
 +
                    transform-origin: 0;
 +
                }
 +
 
 +
                .mfp-arrow-right {
 +
                    -webkit-transform-origin: 100%;
 +
                    transform-origin: 100%;
 +
                }
 +
 
 +
                .mfp-container {
 +
                    padding-left: 6px;
 +
                    padding-right: 6px;
 +
                }
 +
            }
 +
 
 +
            .mfp-zoom-out {
 +
                /* start state */
 +
                /* animate in */
 +
                /* animate out */
 +
            }
 +
 
 +
            .mfp-zoom-out .mfp-with-anim {
 +
                opacity: 0;
 +
                transition: all 0.3s ease-in-out;
 +
                transform: scale(1.3);
 +
            }
 +
 
 +
            .mfp-zoom-out.mfp-bg {
 +
                opacity: 0;
 +
                transition: all 0.3s ease-out;
 +
            }
 +
 
 +
            .mfp-zoom-out.mfp-ready .mfp-with-anim {
 +
                opacity: 1;
 +
                transform: scale(1);
 +
            }
 +
 
 +
            .mfp-zoom-out.mfp-ready.mfp-bg {
 +
                opacity: 0.8;
 +
            }
 +
 
 +
            .mfp-zoom-out.mfp-removing .mfp-with-anim {
 +
                transform: scale(1.3);
 +
                opacity: 0;
 +
            }
 +
 
 +
            .mfp-zoom-out.mfp-removing.mfp-bg {
 +
                opacity: 0;
 +
            }
 +
        </style>
 +
 
 
     </head>
 
     </head>
  
 
<body style="">
 
<body style="">
−
 
+
  <section id="nav-placeholder">
−
    <section id="nav-placeholder">
+
 
     <nav class="shadow navbar navbar-expand-md navbar-dark fixed-top"
 
     <nav class="shadow navbar navbar-expand-md navbar-dark fixed-top"
 
         style="background-color: rgba(30, 30, 30, 0.3); z-index: 100;">
 
         style="background-color: rgba(30, 30, 30, 0.3); z-index: 100;">
Line 9,686: Line 10,282:
 
                 <li id="ourStoryButton" class="nav-item mx-3">
 
                 <li id="ourStoryButton" class="nav-item mx-3">
 
                     <a class="nav-link" href="/Team:Tuebingen/Story"
 
                     <a class="nav-link" href="/Team:Tuebingen/Story"
−
                       style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">OUR STORY</a>
+
                       style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">OUR
 +
                        STORY</a>
 
                 </li>
 
                 </li>
  
Line 9,703: Line 10,300:
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Incretin"
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Incretin"
 
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Incretin</a>
 
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Incretin</a>
−
                         <a class="dropdown-item" href="/Team:Tuebingen/CPP"
+
                         <a class="dropdown-item" href="/Team:Tuebingen/Model"
−
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Cell Penetrating Peptides</a>
+
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Model</a>
 +
                        <a class="dropdown-item" href="/Team:Tuebingen/Software"
 +
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Software</a>
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Results"
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Results"
 
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Results</a>
 
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Results</a>
Line 9,711: Line 10,310:
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Notebook"
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Notebook"
 
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Notebook</a>
 
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Notebook</a>
−
                        <a class="dropdown-item" href="/Team:Tuebingen/Model"
 
−
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Model</a>
 
−
                        <a class="dropdown-item" href="/Team:Tuebingen/Software"
 
−
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Software</a>
 
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Outlook"
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Outlook"
 
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Outlook</a>
 
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Outlook</a>
 +
                        <a class="dropdown-item" href="/Team:Tuebingen/Entrepreneurship"
 +
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Entrepreneurship</a>
 
                     </div>
 
                     </div>
 
                 </li>
 
                 </li>
Line 9,726: Line 10,323:
 
                     <div class="dropdown-menu">
 
                     <div class="dropdown-menu">
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Parts"
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Parts"
−
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Parts Overview</a>
+
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Parts
 +
                            Overview</a>
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Basic_Part"
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Basic_Part"
−
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Basic Parts</a>
+
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Basic
 +
                            Parts</a>
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Improved_Part"
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Improved_Part"
−
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Improved Parts</a>
+
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Improved
 +
                            Parts</a>
 +
                        <a class="dropdown-item" href="/Team:Tuebingen/Characterized_Part"
 +
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Improved
 +
                            Parts</a>
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Composite_Part"
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Composite_Part"
−
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Composite Parts</a>
+
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Composite
 +
                            Parts</a>
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Part_Collection"
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Part_Collection"
−
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Part Collection</a>
+
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Part
 +
                            Collection</a>
 +
                        <a class="dropdown-item" href="/Team:Tuebingen/Downloads"
 +
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Downloads</a>
 
                     </div>
 
                     </div>
 
                 </li>
 
                 </li>
Line 9,748: Line 10,355:
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Collaborations"
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Collaborations"
 
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Collaborations</a>
 
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Collaborations</a>
−
                        <a class="dropdown-item" href="/Team:Tuebingen/Attributions"
 
−
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Attributions</a>
 
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Sponsors"
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Sponsors"
 
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Sponsors</a>
 
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Sponsors</a>
 +
                        <a class="dropdown-item" href="/Team:Tuebingen/Attributions"
 +
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Attributions</a>
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Gallery"
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Gallery"
 
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Gallery</a>
 
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Gallery</a>
Line 9,766: Line 10,373:
 
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Overview</a>
 
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Overview</a>
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Public_Engagement"
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Public_Engagement"
−
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Education & Public
+
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Education & Public Engagement</a>
−
                            Engagement</a>
+
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Experts"
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Experts"
 
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Experts</a>
 
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Experts</a>
−
                        <a class="dropdown-item" href="/Team:Tuebingen/Entrepreneurship"
 
−
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Entrepreneurship</a>
 
 
                         <a class="dropdown-item" href="/Team:Tuebingen/SDG"
 
                         <a class="dropdown-item" href="/Team:Tuebingen/SDG"
−
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Sustainable Development
+
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Sustainable Development Goals</a>
−
                            Goals</a>
+
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Experimenta"
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Experimenta"
−
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Experimenta Science
+
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Experimenta
−
                             Center</a>
+
                             Science Center</a>
 +
                        <a class="dropdown-item" href="/Team:Tuebingen/Survey"
 +
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Survey</a>
 
                     </div>
 
                     </div>
 
                 </li>
 
                 </li>
Line 9,789: Line 10,394:
 
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Integrated Human Practise</a>
 
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Integrated Human Practise</a>
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Public_Engagement"
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Public_Engagement"
−
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Education & Public
+
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Education & Public Engagement</a>
−
                            Engagement</a>
+
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Entrepreneurship"
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Entrepreneurship"
−
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Supporting
+
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Supporting Entrepreneurship</a>
−
                            Entrepreneurship</a>
+
−
                        <a class="dropdown-item" href="/Team:Tuebingen/Measurement"
+
−
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Measurement</a>
+
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Model"
 
                         <a class="dropdown-item" href="/Team:Tuebingen/Model"
 
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Model</a>
 
                           style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Model</a>
Line 9,810: Line 10,411:
 
                 <li class="nav-item mx-3">
 
                 <li class="nav-item mx-3">
 
                     <a class="nav-link" href="https://igem.org/2019_Judging_Form?team=Tuebingen" target="_blank"
 
                     <a class="nav-link" href="https://igem.org/2019_Judging_Form?team=Tuebingen" target="_blank"
−
                       style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">JUDGING
+
                       style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">JUDGING FORM ⇗</a>
−
                        FORM ⇗</a>
+
 
                 </li>
 
                 </li>
  
Line 9,829: Line 10,429:
 
</section>
 
</section>
 
<script>
 
<script>
−
var url = window.location.href;
+
    var url = window.location.href;
−
$(function () {
+
    $(function () {
−
$('.nav-link[href="' + url + '"]').addClass("active");
+
        $('.nav-link[href="' + url + '"]').addClass("active");
−
$('.dropdown-item[href="' + url + '"]').addClass("active");
+
        $('.dropdown-item[href="' + url + '"]').addClass("active");
−
$('.dropdown-item[href="' + url + '"]').parent().parent().addClass("active");
+
        $('.dropdown-item[href="' + url + '"]').parent().parent().addClass("active");
−
});
+
    });
 
</script>
 
</script>
 
<script src="https://2019.igem.org/Team:Tuebingen/jqueryminjs?action=raw&ctype=text/javascript"></script>
 
<script src="https://2019.igem.org/Team:Tuebingen/jqueryminjs?action=raw&ctype=text/javascript"></script>
Line 9,840: Line 10,440:
 
<script src="https://2019.igem.org/Team:Tuebingen/bootstrapjs?action=raw&ctype=text/javascript"></script>
 
<script src="https://2019.igem.org/Team:Tuebingen/bootstrapjs?action=raw&ctype=text/javascript"></script>
 
<script src="https://2019.igem.org/Template:Tuebingen/GLPexeJS?action=raw&ctype=text/javascript"></script>
 
<script src="https://2019.igem.org/Template:Tuebingen/GLPexeJS?action=raw&ctype=text/javascript"></script>
−
    <script src="https://2019.igem.org/Team:Tuebingen/aosJS?action=raw&ctype=text/javascript"></script>
 
−
  <script>
 
−
    AOS.init();
 
−
  </script>
 
−
 
 
</body>
 
</body>
  
 +
<style>
  
−
     <style>
+
     .pictureTitle {
 +
        background: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .5)), url("http://2018.igem.org/wiki/images/2/21/T--Munich--header_projectdesign.png");
 +
        background-repeat: no-repeat;
 +
        background-size: cover;
 +
        background-position: center;
 +
    }
  
−
        /* Scroll Down Icon*/
 
−
        #goToBox {
 
−
            position: relative;
 
−
            width: 30px;
 
−
            height: 28px;
 
−
            left: calc(50% - 15px);
 
−
        }
 
  
−
        .chevron {
+
    @media only screen and (max-width: 575.98px) {
−
            position: absolute;
+
    }
−
            width: 28px;
+
−
            height: 8px;
+
−
            opacity: 0;
+
−
            transform: scale3d(0.5, 0.5, 0.5);
+
−
            animation: move 3s ease-out infinite;
+
−
        }
+
  
−
        .chevron:first-child {
+
    @media only screen and (max-width: 767.98px) {
−
            animation: move 3s ease-out 1s infinite;
+
    }
−
        }
+
  
−
        .chevron:nth-child(2) {
+
    @media only screen and (max-width: 991.98px) {
−
            animation: move 3s ease-out 2s infinite;
+
    }
−
        }
+
  
−
        .chevron:before,
+
    @media only screen and (max-width: 1199.98px) {
−
        .chevron:after {
+
    }
−
            content: ' ';
+
−
            position: absolute;
+
−
            top: 0;
+
−
            height: 100%;
+
−
            width: 51%;
+
−
            background: #fff;
+
−
        }
+
  
−
        .chevron:before {
+
    /*
−
            left: 0;
+
========================
−
            transform: skew(0deg, 30deg);
+
    BUTTON STYLE BEGIN
−
        }
+
========================
 +
*/
  
−
        .chevron:after {
+
.btn-link {
−
            right: 0;
+
        font-weight: 400;
−
            width: 50%;
+
        color: #007bff;
−
            transform: skew(0deg, -30deg);
+
        background-color: transparent
−
        }
+
    }
  
−
        @keyframes move {
+
    .btn-link:hover {
−
            25% {
+
        color: #0056b3;
−
                opacity: 1;
+
        text-decoration: underline;
 +
        background-color: transparent;
 +
        border-color: transparent
 +
    }
  
−
            }
+
    .btn-link.focus, .btn-link:focus {
−
            33% {
+
        text-decoration: underline;
−
                opacity: 1;
+
        border-color: transparent;
−
                transform: translateY(30px);
+
        box-shadow: none
−
            }
+
    }
−
            67% {
+
−
                opacity: 1;
+
−
                transform: translateY(40px);
+
−
            }
+
−
            100% {
+
−
                opacity: 0;
+
−
                transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
+
−
            }
+
−
        }
+
  
−
        @keyframes pulse {
+
    .btn-link.disabled, .btn-link:disabled {
−
            to {
+
        color: #6c757d;
−
                opacity: 1;
+
         pointer-events: none
−
            }
+
    }
−
         }
+
  
 +
    .btn-link{
 +
opacity: 0.8;
 +
text-decoration: none;
 +
color: white;
 +
}
 +
.btn-link:hover{
 +
opacity: 1;
 +
text-decoration: none;
 +
    color: rgba(105, 202, 98, 1.1);
 +
}
 +
.btn-link:focus{
 +
opacity: 1;
 +
text-decoration: none;
 +
    color: rgba(105, 202, 98, 1.1);
 +
}
 +
.card-header{
 +
background-color: rgba(50,50,50,1);
 +
}
 +
.card button{
 +
width: 100%;
 +
font-size: 1.5rem;
 +
}
 +
    /*
 +
========================
 +
    BUTTON STYLE END
 +
========================
 +
*/
  
−
        /* FlowChart*/
+
    /*
−
        .circleO {
+
========================
−
            height: 60px;
+
      BUTTON ONE
−
            width: 60px;
+
========================
−
            padding: auto;
+
*/
−
            border-radius: 50%;
+
.btn-one {
−
            background-color: rgba(230, 230, 230, 1);
+
color: rgba(105, 202, 98, 1.1);
−
            color: black;
+
transition: all 0.3s;
−
            z-index: 2;
+
position: relative;
−
        }
+
}
 +
.btn-one span {
 +
transition: all 0.3s;
 +
}
 +
.btn-one::before {
 +
content: '';
 +
position: absolute;
 +
bottom: 0;
 +
left: 0;
 +
width: 100%;
 +
height: 100%;
 +
z-index: 1;
 +
opacity: 0;
 +
transition: all 0.3s;
 +
border-top-width: 1px;
 +
border-bottom-width: 1px;
 +
border-top-style: solid;
 +
border-bottom-style: solid;
 +
border-top-color: rgba(105, 202, 98, 1.1);
 +
border-bottom-color: rgba(105, 202, 98, 1.1);
 +
transform: scale(0.1, 1);
 +
}
 +
.btn-one:hover span {
 +
letter-spacing: 2px;
 +
}
 +
.btn-one:hover::before {
 +
opacity: 1;
 +
transform: scale(1, 1);
 +
}
 +
.btn-one::after {
 +
content: '';
 +
position: absolute;
 +
bottom: 0;
 +
left: 0;
 +
width: 100%;
 +
height: 100%;
 +
z-index: 1;
 +
transition: all 0.3s;
 +
background-color: rgba(255,255,255,0.05);
 +
}
 +
.btn-one:hover::after {
 +
opacity: 0;
 +
transform: scale(0.1, 1);}
 +
    /*
 +
========================
 +
      BUTTON ONE END
 +
========================
 +
*/
  
−
        .circleO img {
+
    /*
−
            max-height: 40px;
+
    ======================
−
            width: auto;
+
    HEADER BANNER STYLE BEGIN
−
        }
+
    ==========================
 +
    */
  
−
        .circleS {
+
    .header {
−
            height: 60px;
+
        position: relative;
−
            width: 60px;
+
        overflow: hidden;
−
            padding: auto;
+
        display: flex;
−
            border-radius: 50%;
+
        flex-wrap: wrap;
−
            background-image: linear-gradient(rgba(1, 101, 224, 1), rgba(0, 203, 177, 1));
+
        justify-content: center;
−
            color: black;
+
        align-items: flex-start;
−
            z-index: 2;
+
        align-content: flex-start;
−
         }
+
        height: 50vh;
 +
        max-height: 350px;
 +
         min-width: 300px;
 +
        color: #eee;
 +
    }
  
−
        .circleS img {
+
    .header:after {
−
            max-height: 40px;
+
        content: "";
−
            width: auto;
+
        width: 100%;
−
         }
+
         height: 100%;
 +
        position: absolute;
 +
        bottom: 0;
 +
        left: 0;
 +
        z-index: -1;
 +
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 40%, rgba(27, 32, 48, 1) 100%);
 +
    }
  
−
        .circleM {
+
    .header:before {
−
            height: 100px;
+
        content: "";
−
            width: 100px;
+
        width: 100%;
−
            padding: auto;
+
        height: 100%;
−
            border-radius: 50%;
+
        position: absolute;
−
            background-image: linear-gradient(rgba(1, 101, 224, 1), rgba(0, 203, 177, 1));
+
        top: 0;
−
            color: black;
+
        left: 0;
−
            z-index: 2;
+
        -webkit-backface-visibility: hidden;
−
            1, 101, 224
+
        -webkit-transform: translateZ(0) scale(1.0, 1.0);
−
        }
+
        transform: translateZ(0);
 +
        background: #1B2030 url(https://2019.igem.org/wiki/images/5/50/T--Tuebingen--experimenta-banner.jpg) center no-repeat;
 +
        background-size: 100%, 100%;
 +
        animation: grow 30s linear 10ms infinite;
 +
        transition: all 0.2s ease-in-out;
 +
        z-index: -2
 +
    }
  
−
        .circleM img {
+
    .header a {
−
            max-height: 80px;
+
        color: #eee
−
            width: auto;
+
    }
−
        }
+
  
−
        .circleL {
+
    .info {
−
            height: 160px;
+
        width: 100%;
−
            width: 160px;
+
        padding: 15% 10% 0 10%;
−
            padding: auto;
+
        text-align: center;
−
            border-radius: 50%;
+
        text-shadow: 0 2px 3px rgba(0, 0, 0, 0.2)
−
            background-image: linear-gradient(rgba(1, 101, 224, 1), rgba(0, 203, 177, 1));
+
    }
−
            color: black;
+
−
            z-index: 2;
+
−
        }
+
  
−
        .circleL img {
+
    .info h1{
−
            max-height: 130px;
+
        font-size:3.0em;
−
            width: auto;
+
    }
−
        }
+
  
−
        #conceptFlow h5 {
+
    .info h4, .meta {
−
            font-weight: bold;
+
        font-size: 0.7em
−
            font-size: 2rem;
+
    }
−
            margin-bottom: 30px;
+
−
            color: #009ec6;
+
−
        }
+
  
−
         #conceptFlow span {
+
    @media only screen and (min-width: 2250px) {
−
             font-size: 1.5rem;
+
         .info h1 {
 +
             margin-top: -50%;
 
         }
 
         }
 +
    }
  
−
        /* height of each section*/
+
    @media only screen and (min-width: 2000px) {
−
         .how-it-works.row {
+
         .info h1 {
−
             height: 50vh
+
             margin-top: -10%;
 
         }
 
         }
 +
    }
  
−
         .how-it-works.row .col-3 {
+
    @media only screen and (min-width: 1500px) {
−
             align-self: stretch;
+
         .info h1 {
 +
             margin-top: -5%;
 
         }
 
         }
 +
    }
  
−
        .how-it-works.row .col-3::after {
+
    @media only screen and (max-width: 800px) {
−
            content: "";
+
        .info h1 {
−
             position: absolute;
+
             margin-top: 9%;
−
             border-left: 3px solid rgba(82, 187, 199, 1);
+
             font-size: 2.3em;
−
             z-index: 1;
+
             text-align: center;
 
         }
 
         }
  
−
         .diagnosis.row .col-3::after {
+
         .header {
−
             content: "";
+
             height: 45vh;
−
            position: absolute;
+
−
            border-left: 3px dotted rgba(82, 187, 199, 1);
+
−
            z-index: 1;
+
 
         }
 
         }
 +
    }
  
−
        .how-it-works.row .col-3.bottom::after {
+
    @media only screen and (max-width: 660px) {
−
            height: 50%;
+
        .info h1 {
−
             left: 50%;
+
             margin-top: 10%;
−
             top: 50%;
+
             font-size: 2.3em;
 
         }
 
         }
  
−
        .how-it-works.row .col-3.full::after {
 
−
            height: 100%;
 
−
            left: calc(50% - 3px);
 
−
        }
 
  
−
        .how-it-works.row .col-3.fullRight::after {
+
    }
−
            height: 100%;
+
−
            left: 50%;
+
−
        }
+
  
−
        .how-it-works.row .col-3.top::after {
 
−
            height: 50%;
 
−
            left: calc(50% - 3px);
 
−
            top: 0;
 
−
            border: 2px dotted rgba(82, 187, 199, 1);
 
−
        }
 
  
  
−
         .timeline div {
+
    @media only screen and (max-width: 560px) {
−
             padding: 0;
+
         .info h1 {
−
            height: 40px;
+
             margin-top: 15%;
 
         }
 
         }
−
 
+
         .header {
−
         .timeline hr {
+
             height: 40vh;
−
             border-top: 3px solid rgba(82, 187, 199, 1);
+
−
            background-color: transparent;
+
−
            margin: 0;
+
−
            top: 17px;
+
−
            position: relative;
+
 
         }
 
         }
 +
    }
  
−
        .timeline .col-3 {
 
−
            display: flex;
 
−
            overflow: hidden;
 
−
        }
 
  
−
        .timeline .corner {
 
−
            border: 3px solid rgba(82, 187, 199, 1);
 
−
            width: 100%;
 
−
            position: relative;
 
−
            border-radius: 15px;
 
−
        }
 
  
−
         .timeline .top-right {
+
    @media only screen and (max-width: 470px) {
−
             left: 50%;
+
         .info h1 {
−
             top: -50%;
+
             margin-top: 10%;
 +
             font-size: 1.9em;
 
         }
 
         }
 +
    }
  
−
        .timeline .left-bottom {
 
−
            left: -50%;
 
−
            top: calc(50% - 3px);
 
−
        }
 
  
−
        .timeline .top-left {
 
−
            left: -50%;
 
−
            top: -50%;
 
−
        }
 
  
−
         .timeline .right-bottom {
+
    @media only screen and (max-width: 400px) {
−
             left: 50%;
+
         .info h1 {
−
            top: calc(50% - 3px);
+
             margin-top: 20%;
 
         }
 
         }
−
 
+
         .header {
−
         /* Qoutes Part*/
+
             height: 27vh;
−
        #warnPics {
+
−
             height: auto;
+
−
            min-height: 20vw;
+
−
            font-weight: 100;
+
 
         }
 
         }
 +
    }
  
−
         #warnPics .qoutes span {
+
    @media only screen and (max-width: 350px) {
−
             font-size: 1.5rem;
+
         .info h1 {
 +
             margin-top: 25%;
 
         }
 
         }
 +
    }
  
−
         #warnPics .qoutes {
+
    @keyframes grow {
−
 
+
         0% {
 +
            transform: scale(1)
 
         }
 
         }
−
 
+
         50% {
−
         #qoute1 {
+
             transform: scale(1.2)
−
             background: linear-gradient(rgba(35, 35, 35, 1), rgba(35, 35, 35, .3), rgba(35, 35, 35, 1)), url("http://2018.igem.org/wiki/images/c/c9/T--Munich--death_background.png");
+
−
            background-repeat: no-repeat;
+
−
            background-size: cover;
+
−
            background-position: center;
+
−
            color: #fff;
+
 
         }
 
         }
 +
    }
  
−
        #qoute2 {
+
    /*  ======================
−
            background: linear-gradient(rgba(35, 35, 35, 1), rgba(35, 35, 35, .3), rgba(35, 35, 35, 1)), url("http://2018.igem.org/wiki/images/4/4e/T--Munich--WarningPic1.jpg");
+
        HEADER BANNER STYLE END
−
            background-repeat: no-repeat;
+
        ==========================
−
            background-size: cover;
+
         */
−
            background-position: center;
+
−
            color: #fff;
+
−
         }
+
  
−
        #qoute3 {
+
</style>
−
            background: linear-gradient(rgba(35, 35, 35, 1), rgba(35, 35, 35, .3), rgba(35, 35, 35, 1)), url("http://2018.igem.org/wiki/images/6/66/T--Munich--PHAGE.jpg");
+
−
            background-repeat: no-repeat;
+
−
            background-size: cover;
+
−
            background-position: top;
+
−
            color: #fff;
+
−
        }
+
  
−
        #whyTitle {
+
<!-- Header Banner Begin-->
−
            background: rgba(35, 35, 35, 1);
+
<div class="header">
−
        }
+
  <div class="info">
 +
    <h1 style="font-family: 'Righteous', cursive; font-weight: normal; color:#2ecc71;">Experimenta</h1>
 +
  </div>
 +
</div>
 +
<!-- Header Banner End-->
  
−
        .warningContent span {
 
−
            font-size: 2.5rem;
 
−
            font-weight: bold;
 
−
        }
 
  
−
        .mobileText {
+
<div style="background-color: #232323; overflow-x: fragments; overflow-wrap: break-word">
−
            font-size: 1.5rem !important;
+
−
            margin-top: 3rem;
+
−
        }
+
  
 +
<div class="glpContainer">
 +
    <aside id="glpContentsOuter" style="background-color: #232323">
 +
        <aside id="phaContents" class="table-of-contents">
 +
            <!-- will be generated with JS -->
 +
        </aside>
 +
    </aside>
  
−
        #conceptFlowTitle {
+
    <main class="post-content">
−
            font-size: 2.5rem;
+
        <div id="image-popups">
−
            font-weight: bold;
+
−
        }
+
  
−
 
+
         <h2 style="font-family:'Righteous'; color:#2ecc71;">The Experimenta Science Center Heilbronn</h2>
−
         /* START PopUp STYLES */
+
         <div class="row">
−
        .labelBox {
+
             <div class="col-12">
−
            display: inline;
+
                 <p>
−
        }
+
                     The Experimenta Science Center (<a href="https://www.experimenta.science/" onclick='window.open("https://www.experimenta.science/","_self");'>Experimenta</a>) in Heilbronn, Baden-Wuerttemberg,
−
 
+
                     Germany offers science at your fingertips on an area of around 25,000 square metres with around 275
−
        .reg {
+
                     interactive exhibits, four creative studios and nine laboratories, as well as an observatory and an
−
            background-color: white;
+
                    extraordinary science dome with spectacular science shows. Additionally, last year, they set up the
−
            display: inline;
+
                    “Schülerforschungszentrum” (SFZ), where young researchers are actively supported in their initial
−
            margin: 0 auto;
+
                    scientific work. It is directed at students from high schools in Heilbronn. Their general idea is to
−
            width: auto;
+
                     encourage students to develop their own projects while funding, lab space and supervision is granted.
−
            font-size: 16.996px;
+
                 </p>
−
            line-height: 20px;
+
             </div>
−
            padding: 12px 18px 13px;
+
−
            -webkit-border-radius: 6px;
+
−
            -moz-border-radius: 6px;
+
−
            -ms-border-radius: 6px;
+
−
            -o-border-radius: 6px;
+
−
            border-radius: 6px;
+
−
            -webkit-transition: all 0.3s ease-in-out;
+
−
            -moz-transition: all 0.3s ease-in-out;
+
−
            transition: all 0.3s ease-in-out;
+
−
            color: #009ec6;
+
−
            cursor: pointer;
+
−
            border: none;
+
−
            text-decoration: underline;
+
−
        }
+
−
 
+
−
        .reg:hover {
+
−
            opacity: 0.8;
+
−
            -webkit-transition: all 0.3s ease-in-out;
+
−
            -moz-transition: all 0.3s ease-in-out;
+
−
            transition: all 0.3s ease-in-out;
+
−
        }
+
−
 
+
−
        .pop {
+
−
            display: none;
+
−
            position: absolute;
+
−
            top: 75%;
+
−
            max-width: 100%;
+
−
            height: auto;
+
−
            -webkit-border-radius: 6px;
+
−
            -moz-border-radius: 6px;
+
−
            -ms-border-radius: 6px;
+
−
            -o-border-radius: 6px;
+
−
            border-radius: 6px;
+
−
            z-index: 200;
+
−
            padding: 10px;
+
−
            background-color: rgba(240, 240, 240, 1);
+
−
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+
−
        }
+
−
 
+
−
        .pop > h1 {
+
−
            color: #009ec6;
+
−
            font-size: 100%;
+
−
         }
+
−
 
+
−
        .pop > p {
+
−
             font-size: 100%;
+
−
            color: #777777;
+
−
        }
+
−
 
+
−
        .pop > span {
+
−
            cursor: pointer;
+
−
            position: absolute;
+
−
            top: 10px;
+
−
            right: 10px;
+
−
            -webkit-border-radius: 100px;
+
−
            -moz-border-radius: 100px;
+
−
            color: #777777;
+
−
            width: 30px;
+
−
            height: 30px;
+
−
        }
+
−
 
+
−
        /* END PopUp STYLES */
+
−
 
+
−
        .mobileTitle {
+
−
            font-size: 3.5rem !important;
+
−
        }
+
−
 
+
−
        .readButton, .readButton:visited {
+
−
            color: #17a2b8;
+
−
        }
+
−
 
+
−
        .readButton:hover {
+
−
            color: white;
+
−
        }
+
−
 
+
−
        .showCase .row {
+
−
            padding-left: 10vw;
+
−
            padding-right: 10vw;
+
−
        }
+
−
 
+
−
        @media only screen and (max-width: 767.98px) {
+
−
            #videoBox #videoShow {
+
−
                 position: relative;
+
−
            }
+
−
 
+
−
            #PhactoryTitle {
+
−
                font-size: 4rem;
+
−
            }
+
−
 
+
−
            #PhactoryText {
+
−
                font-size: 1.5rem;
+
−
            }
+
−
 
+
−
            .warningContent span {
+
−
                font-size: 1.5rem;
+
−
            }
+
−
 
+
−
            @media screen and (max-width: 500px) {
+
−
                .warningContent span {
+
−
                     font-size: 1.5rem;
+
−
                }
+
−
            }
+
−
 
+
−
            #warnPics .qoutes {
+
−
                font-size: 1rem;
+
−
            }
+
−
 
+
−
            #compareBox img {
+
−
                max-height: 20vh;
+
−
                width: auto;
+
−
            }
+
−
 
+
−
            .mobileTitle {
+
−
                font-size: 3rem !important;
+
−
            }
+
−
 
+
−
            @media screen and (max-width: 450px) {
+
−
                .mobileTitle {
+
−
                    font-size: 2.0rem !important;
+
−
                }
+
−
            }
+
−
 
+
−
            #conceptFlowTitle {
+
−
                font-size: 2rem;
+
−
                font-weight: bold;
+
−
            }
+
−
 
+
−
            #conceptFlow h5 {
+
−
                font-size: 1.5rem;
+
−
            }
+
−
 
+
−
            #conceptFlow span {
+
−
                font-size: 1rem;
+
−
            }
+
−
 
+
−
            .how-it-works.row {
+
−
                height: auto;
+
−
            }
+
−
 
+
−
            /* FlowChart*/
+
−
            .circleO {
+
−
                height: 40px;
+
−
                width: 40px;
+
−
            }
+
−
 
+
−
            .circleO img {
+
−
                max-height: 25px;
+
−
                width: auto;
+
−
            }
+
−
 
+
−
            .circleS {
+
−
                height: 40px;
+
−
                width: 40px;
+
−
            }
+
−
 
+
−
            .circleS img {
+
−
                max-height: 25px;
+
−
                width: auto;
+
−
            }
+
−
 
+
−
            .circleM {
+
−
                height: 50px;
+
−
                width: 50px;
+
−
            }
+
−
 
+
−
            .circleM img {
+
−
                max-height: 35px;
+
−
                width: auto;
+
−
            }
+
−
 
+
−
            .circleL {
+
−
                height: 60px;
+
−
                width: 60px;
+
−
            }
+
−
 
+
−
            .circleL img {
+
−
                max-height: 45px;
+
−
                width: auto;
+
−
            }
+
−
 
+
−
            .reg {
+
−
                padding: 0;
+
−
            }
+
−
 
+
−
            .mobileText {
+
−
                font-size: 1rem !important;
+
−
                margin-top: 0;
+
−
            }
+
−
 
+
−
            .showCase .row {
+
−
                padding: 0;
+
−
            }
+
−
        }
+
−
 
+
−
        @media only screen and (max-width: 991.98px) {
+
−
        }
+
−
 
+
−
        @media only screen and (max-width: 1199.98px) {
+
−
        }
+
−
    </style>
+
−
 
+
−
    <script>
+
−
        // Scroll Down Icon
+
−
        $(document).ready(function () {
+
−
            // Add smooth scrolling to all links
+
−
            $("#goTo").on('click', function (event) {
+
−
 
+
−
                // Make sure this.hash has a value before overriding default behavior
+
−
                if (this.hash !== "") {
+
−
                    // Prevent default anchor click behavior
+
−
                    event.preventDefault();
+
−
 
+
−
                    // Store hash
+
−
                    var hash = this.hash;
+
−
 
+
−
                    // Using jQuery's animate() method to add smooth page scroll
+
−
                     // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
+
−
                     $('html, body').animate({
+
−
                        scrollTop: $(hash).offset().top
+
−
                    }, 800, function () {
+
−
 
+
−
                        // Add hash (#) to URL when done scrolling (default click behavior)
+
−
                        window.location.hash = hash;
+
−
                     });
+
−
                } // End if
+
−
            });
+
−
        });
+
−
 
+
−
 
+
−
        $(document).ready(function () {
+
−
            $(".reg").click(function () {
+
−
                $(".pop").fadeOut(100);
+
−
                $(this).next().fadeIn(300);
+
−
            });
+
−
 
+
−
            $(".pop > span, .pop").click(function () {
+
−
                 $(".pop").fadeOut(300);
+
−
            });
+
−
        });
+
−
 
+
−
    </script>
+
−
 
+
−
<div id="videoBox" class="text-center" style="position: relative;  min-height:5%; width:100%; margin-top: 50px">
+
−
    <video id="videoShow" playsinline autoplay muted id="myVideo" style="min-height:5%; width:100%; margin-top: 50px">
+
−
        <source src="https://2019.igem.org/wiki/images/c/c1/T--Tuebingen--cover_video.mp4" type="video/mp4"
+
−
                style="width: 100%;">
+
−
        Your browser does not support HTML5 video.
+
−
    </video>
+
−
 
+
−
</div>
+
−
 
+
−
 
+
−
<div id="whyTitle" class="container-fluid jumbotron jumbotron-fluid text-center mb-0 p-0 align-items-center text-light" style="overflow-x: hidden; overflow-y: hidden;">
+
−
<div data-aos="zoom-out-left"
+
−
    data-aos-offset="200"
+
−
    data-aos-delay="50"
+
−
    data-aos-duration="2000"
+
−
    data-aos-easing="ease-in-out-cubic"
+
−
    data-aos-mirror="true"
+
−
    data-aos-once="false">
+
−
    <div class="row pt-5 pb-3 ">
+
−
        <div class="warningContent col-12">
+
−
             <span class="align-middle" style="font-family: 'Righteous';color:#2ecc71;font-size: 2.7rem !important;">GLP.exe - a safe and effective treatment for Diabetes Mellitus Type II</span>
+
 
         </div>
 
         </div>
−
    </div>
 
  
−
    <div class="row p-5" style="padding-left: 10vw; padding-right: 10vw;">
+
            <h2 style="font-family:'Righteous'; color:#2ecc71;">Our 4 Day Lab Course</h2>
 +
            <div class="row">
 +
                <div class="col-12">
 +
                    <p>The course was held in a collaborative manner over a span of four days. Dr. Robert Friedrich,
 +
                        a biologist working for the SFZ, gave the general lab introduction and provided the overall lab
 +
                        responsibility, while we were mainly responsible to teach the required theoretical background,
 +
                        introduce bioinformatics data analysis (DNA-Seq) and finally project development. Additionally,
 +
                        we were supporting Dr. Friedrich during the experiments and closely supervised the students.</p>
 +
                </div>
 +
            </div>
 +
            <div class="row">
 +
                <div class="col-12">
 +
                    <div class="row align-items-center">
 
         <div class="col-12 col-md-6">
 
         <div class="col-12 col-md-6">
−
            <img class="img-fluid" src="https://2019.igem.org/wiki/images/3/3c/T--Tuebingen--Diabetes-Treatment-transparent-Landing-Page.png"
+
        <figure>
−
                alt="meetUp" style="padding-left: 6vw;">
+
                        <a style="font-size: small"
−
        </div>
+
                          href="https://2019.igem.org/wiki/images/e/e8/T--Tuebingen--Experimenta-Lab4.png"
−
        <div class="col-12 col-md-6 pt-3" style="padding-right: 6vw;">
+
                          data-effect="mfp-zoom-out"
−
            <p class="text-justify  mobileText">Several treatment options for Type II Diabetes Mellitus
+
                          title="Some title">
−
                have been developed in recent years significantly improving the patients' insulin level.
+
                            <img src="https://2019.igem.org/wiki/images/e/e8/T--Tuebingen--Experimenta-Lab4.png"
−
            </p>
+
                                class="figure-img img-fluid rounded"
 +
                                alt="Placeholder"></a>
 +
                    </figure>
  
−
            <p class="text-justify  mobileText">
 
−
                Hence, the diagnosis of Type II Diabetes Mellitus is no longer a death sentence.
 
−
            </p>
 
 
         </div>
 
         </div>
−
    </div>
+
        <div class="col-12 col-md-6 ">
−
</div>
+
         <p>We conveyed the required theoretical background in a modern and interactive way, with the use of
−
 
+
             smart boards and current web tools. We focused on teaching the highly motivated students cutting-edge
−
    <div class="row pt-5 pb-3 ">
+
            research, while providing a theoretical foundation, preparing them for different biology competitions
−
         <div class="warningContent col-12 slide-in">
+
            and eventually university.</p>
−
             <span class="align-middle" style="font-family: 'Righteous';color:#2ecc71; font-size: 3rem !important;">Yet...</span>
+
 
         </div>
 
         </div>
−
    </div>
+
                    </div>
 +
                </div>
 +
            </div>
  
−
    <div data-aos="zoom-out-right"
+
            <div class="row">
−
    data-aos-offset="200"
+
                <div class="col-12">
−
    data-aos-delay="50"
+
                    <div class="row align-items-center">
−
    data-aos-duration="2000"
+
−
    data-aos-easing="ease-in-out-cubic"
+
−
    data-aos-mirror="true"
+
−
    data-aos-once="false">
+
−
    <div class="row p-5" style="padding-left: 10vw; padding-right: 10vw;">
+
 
         <div class="col-12 col-md-6">
 
         <div class="col-12 col-md-6">
−
            <img class="img-fluid" src="https://2019.igem.org/wiki/images/1/15/T--Tuebingen--Injection-Scheme-transparent-Landing-Page.png"
+
        <figure>
−
                alt="meetUp" style="padding-left: 6vw;">
+
                        <a style="font-size: small"
−
        </div>
+
                          href="https://2019.igem.org/wiki/images/9/94/T--Tuebingen--Experimenta-Lab3.png"
−
 
+
                          data-effect="mfp-zoom-out"
−
        <div class="col-12 col-md-6 pt-3" style="padding-right: 6vw;">
+
                          title="Some title">
−
            <h2 class="display-4 mobileTitle" style="font-family: 'Righteous';color:#2ecc71;">Current Drugs</h2>
+
                            <img src="https://2019.igem.org/wiki/images/9/94/T--Tuebingen--Experimenta-Lab3.png"
−
            <p class="text-justify mobileText">are expensive, require fine tuning and daily shots.
+
                                class="figure-img img-fluid rounded"
−
                Moreover, they have severe side-effects, causing patients to skip doses.</p>
+
                                alt="Placeholder"></a>
−
 
+
                    </figure>
−
            <p class="text-justify mobileText">“Many patients don’t want to use insulin. They don’t want
+
−
                to do finger sticks and they’re afraid of hypoglycemia.”<br>
+
−
            </p>
+
  
−
            <p class="text-justify mobileText">
 
−
                “To fight the global diabetes pandemic, we would ideally have an accessible cost-effective
 
−
                easily-compliant intervention that has high clinical efficacy and that is free of adverse side effects.”<br><br>
 
−
                Prof. Harold Lebovitz, State University of New York Health Science Center, Brooklyn, New York
 
−
            </p>
 
 
         </div>
 
         </div>
−
    </div>
+
        <div class="col-12 col-md-6 ">
−
    </div>
+
        <figure>
−
 
+
                        <a style="font-size: small"
−
    <div class="row pt-5 pb-3 ">
+
                          href="https://2019.igem.org/wiki/images/6/69/T--Tuebingen--Experimenta-Lab5.png"
−
        <div class="warningContent col-12">
+
                          data-effect="mfp-zoom-out"
−
            <span class="align-middle" style="font-family: 'Righteous';color:#2ecc71;font-size: 3rem !important;">However...</span>
+
                          title="Some title">
 +
                            <img src="https://2019.igem.org/wiki/images/6/69/T--Tuebingen--Experimenta-Lab5.png"
 +
                                class="figure-img img-fluid rounded"
 +
                                alt="Placeholder"></a>
 +
                    </figure>
 
         </div>
 
         </div>
−
    </div>
+
                    </div>
 +
                    <p>
 +
                        Please check out the material we prepared for the course - a script covering all the theoretical
 +
                        background and a presentation:
 +
                    </p>
 +
                    <ul style="color:#F4F0DE;">
 +
                      <li><a href="https://2019.igem.org/wiki/images/6/6c/T--Tuebingen--Experimenta_Labkurs_Skript.pdf" onclick='window.open("https://2019.igem.org/wiki/images/6/6c/T--Tuebingen--Experimenta_Labkurs_Skript.pdf","_self");'>Experimenta Labkurs</a></li>
 +
                      <li><a href="https://2019.igem.org/wiki/images/1/10/T--Tuebingen--LabCoursePresentation.pdf" onclick='window.open("https://2019.igem.org/wiki/images/1/10/T--Tuebingen--LabCoursePresentation.pdf","_self");'>LabCourse Presentation</a>)</li>
 +
                    </ul>
 +
                    <p>
 +
                        Please see the schedule below.
 +
                    </p>
 +
                </div>
 +
            </div>
  
−
    <div data-aos="zoom-out-left"
+
            <div class="row">
−
    data-aos-offset="200"
+
                <div class="col-12">
−
    data-aos-delay="50"
+
                    <figure>
−
    data-aos-duration="2000"
+
                        <a style="font-size: small"
−
    data-aos-easing="ease-in-out-cubic"
+
                          href="https://2019.igem.org/wiki/images/f/f1/T--Tuebingen--table_test.png"
−
    data-aos-mirror="true"
+
                          data-effect="mfp-zoom-out"
−
    data-aos-once="false">
+
                          title="Some title">
 +
                            <img src="https://2019.igem.org/wiki/images/f/f1/T--Tuebingen--table_test.png"
 +
                                class="figure-img img-fluid rounded"
 +
                                alt="Placeholder"></a>
 +
                    </figure>
 +
                </div>
 +
            </div>
 +
 
 +
            <div class="row">
 +
                <div class="col-12">
 +
                    <p>Due to the interactive design of the course, we also discussed the experiments with the students
 +
                        and tried to summarize what we did on the blackboard:</p>
  
−
    <div class="row p-5" style="padding-left: 10vw; padding-right: 10vw;">
+
                    <div class="row align-items-center">
 
         <div class="col-12 col-md-6">
 
         <div class="col-12 col-md-6">
−
            <img class="img-fluid" src="https://2019.igem.org/wiki/images/e/e3/T--Tuebingen--Our-Probiotic-transparent-Landing-page.png"
+
        <figure>
−
                alt="meetUp" style="padding-left: 6vw;">
+
                        <a style="font-size: small"
−
        </div>
+
                          href="https://2019.igem.org/wiki/images/b/be/T--Tuebingen--Experimenta-Lab1.png"
 +
                          data-effect="mfp-zoom-out"
 +
                          title="Some title">
 +
                            <img src="https://2019.igem.org/wiki/images/b/be/T--Tuebingen--Experimenta-Lab1.png"
 +
                                class="figure-img img-fluid rounded"
 +
                                alt="Placeholder"></a>
 +
                    </figure>
  
−
        <div class="col-12 col-md-6 pt-3" style="padding-right: 6vw;">
 
−
            <h2 class="display-4 mobileTitle" style="font-family: 'Righteous';color:#2ecc71;">There's a solution!</h2>
 
−
            <p class="text-justify mobileText">Our therapeutic agent is a probiotic secreting incretin
 
−
                mimetics placed in the patients intestine by oral administration of capsules. GLP-1 and Exendin-4, our
 
−
                main actors, cause an increase in insulin secretion, if the cell has already taken up sugar.</p>
 
−
 
−
            <p class="text-justify mobileText">This enables an easier therapy where a regular intake of
 
−
                medicals are not required.</p>
 
−
 
−
            <p class="text-justify mobileText">Improved cell penetrating peptides with the use of
 
−
                artificial intelligence allow for an efficient and safe transport of our effectors into the cells.</p>
 
 
         </div>
 
         </div>
−
    </div>
+
        <div class="col-12 col-md-6 ">
−
    </div>
+
        <figure>
−
 
+
                        <a style="font-size: small"
−
    <div class="row pt-5 pb-3 ">
+
                          href="https://2019.igem.org/wiki/images/d/df/T--Tuebingen--Experimenta-Lab2.png"
−
        <div class="warningContent col-12">
+
                          data-effect="mfp-zoom-out"
−
            <span class="align-middle" style="font-family: 'Righteous';color:#2ecc71;font-size: 3rem !important;">Safety</span>
+
                          title="Some title">
 +
                            <img src="https://2019.igem.org/wiki/images/d/df/T--Tuebingen--Experimenta-Lab2.png"
 +
                                class="figure-img img-fluid rounded"
 +
                                alt="Placeholder"></a>
 +
                    </figure>
 
         </div>
 
         </div>
−
    </div>
+
                    </div>
 +
                </div>
 +
            </div>
  
−
    <div data-aos="zoom-out-right"
+
            <div class="row">
−
    data-aos-offset="200"
+
                <div class="col-12">
−
    data-aos-delay="50"
+
                    <p>The students were also very interested in iGEM and our work. Hence, we not only introduced iGEM
−
    data-aos-duration="2000"
+
                        and our project to them, but also let them critically evaluate our project. They were also given
−
    data-aos-easing="ease-in-out-cubic"
+
                        the chance to conduct PCRs related to our project and could therefore gain insights into the upcoming
−
    data-aos-mirror="true"
+
                        challenges when starting a new project or experiment where not everything has been optimised for
−
    data-aos-once="false">
+
                        easy functionality. Many students were interested in the iGEM competition itself and in the process
 +
                        of finding a project and making it feasible. Therefore, we also invested into giving valuable input
 +
                        and advice on starting a project and encouraged the students to participate in iGEM or similar projects
 +
                        themselves. Several questions and concerns relating the functionality of our probiotic under different
 +
                        conditions, such as patients taking medications or antibiotics were also raised by the students. These
 +
                        fruitful discussions, as well as our exchange with several experts, contributed to the final design
 +
                        of our RNA-Seq experiment providing valuable input and different aspects to be considered
 +
                        [<a href="https://2019.igem.org/Team:Tuebingen/Experts" onclick='window.open("https://2019.igem.org/Team:Tuebingen/Experts","_self");'>Experts</a>, <a href="https://2019.igem.org/Team:Tuebingen/Nissle" onclick='window.open("https://2019.igem.org/Team:Tuebingen/Nissle","_self");'>Nissle</a>].</p>
  
−
    <div class="row p-5" style="padding-left: 10vw; padding-right: 10vw;">
+
                    <p>
−
        <div class="col-12 col-md-6">
+
                        Due to the high interest of the students and the positive feedback from the Experimenta itself,
−
            <img class="img-fluid" src="https://2019.igem.org/wiki/images/6/6d/T--Tuebingen--Cas3-system-transparent-Landing-page.png"
+
                        we discussed the possibility of creating an iGEM high school team in Heilbronn in 2020.
−
                alt="meetUp" style="padding-left: 6vw;">
+
                        The Experimenta is highly interested in participating in iGEM 2020 with motivated students and
−
        </div>
+
                        will provide the required laboratories, supervision and funding. Our team will still be serving
 +
                        as advisors for the planned iGEM high school team next year. Furthermore, a new student lab course
 +
                        on CRISPR/Cas will be introduced at the Experimenta on the grounds of the theoretical background,
 +
                        input and inspiration iGEM Tuebingen conveyed.
 +
                    </p>
 +
                </div>
 +
            </div>
  
−
        <div class="col-12 col-md-6 pt-3" style="padding-right: 6vw;">
+
             <h3 style="font-family:'Righteous'; color:#2ecc71;">Panel Discussion - „Biohacking – genetic experiments done at home“</h3>
−
             <h2 class="display-4 mobileTitle" style="font-family: 'Righteous';color:#2ecc71;">is our highest priority!</h2>
+
             <div class="row">
−
             <p class="text-justify mobileText">Therefore, we developed a novel, Cas3 based kill-switch
+
                <div class="col-12">
−
                mechanism. The flexible system uses three regulators inspired by the human intestines: temperature,
+
                    <p>In addition to the lab course, we also decided to host a panel discussion at the Experimenta.
−
                availability of fatty acids in form of Acyl CoA and N-Acetyl-Glucosamin. </p>
+
                        At the beginning of the <a href="https://2019.igem.org/wiki/images/2/24/T--Tuebingen--panelDiscussion.pdf" onclick='window.open("https://2019.igem.org/wiki/images/2/24/T--Tuebingen--panelDiscussion.pdf","_self");'>panel discussion</a>, we gave a talk about on the CRISPR / Cas method itself.
 +
                        We also included an overview of our ongoing project and the iGEM competition in general.</p>
  
−
            <p class="text-justify mobileText">
+
                    <p>
−
                If the conditions of our regulatory system are no longer met, Cas3 will be degrading all genetic
+
                        In collaboration with Dr. Robert Friedrich, we designed a discussion around the status of current
−
                information.
+
                        research on CRISPR / Cas, the effectiveness of the method and its limitations, the prospects of
−
            </p>
+
                        future CRISPR / Cas developments, the availability and legality of so-called Do-It-Yourself CRISPR /
−
        </div>
+
                        Cas Kits and the ethical implications on society. The panel consisted out of Prof. Dr. Christoph
−
    </div>
+
                        Thyssen (<a href="www.bio.uni-kl.de/organisation/mitarbeiter/s-u/thyssen-christoph/" onclick='window.open("www.bio.uni-kl.de/organisation/mitarbeiter/s-u/thyssen-christoph/","_self");'>Christoph Thyssen</a>), an expert for subject
−
    </div>
+
                        didactics in biology and two of our team members - Marietheres Evers and Famke Baeuerle.
 +
                    </p>
  
−
    <div class="row pt-5 pb-3 ">
+
                    <div class="row align-items-center">
−
        <div class="warningContent col-12">
+
−
            <span class="align-middle" style="font-family: 'Righteous';color:#2ecc71;font-size: 3rem !important;">Additionally</span>
+
−
        </div>
+
−
    </div>
+
−
 
+
−
    <div data-aos="zoom-out-left"
+
−
    data-aos-offset="200"
+
−
    data-aos-delay="50"
+
−
    data-aos-duration="2000"
+
−
    data-aos-easing="ease-in-out-cubic"
+
−
    data-aos-mirror="true"
+
−
    data-aos-once="false">
+
−
 
+
−
    <div class="row p-5" style="padding-left: 10vw; padding-right: 10vw;">
+
 
         <div class="col-12 col-md-6">
 
         <div class="col-12 col-md-6">
−
            <img class="img-fluid" src="https://2019.igem.org/wiki/images/a/a6/T--Tuebingen--EcN-Charakterisierung-transparent-Landing-page.png"
+
        <figure>
−
                alt="meetUp" style="padding-left: 6vw;">
+
                        <a style="font-size: small"
−
        </div>
+
                          href="https://2019.igem.org/wiki/images/5/54/T--Tuebingen--Biohacking_05.jpg"
 +
                          data-effect="mfp-zoom-out"
 +
                          title="Some title">
 +
                            <img src="https://2019.igem.org/wiki/images/5/54/T--Tuebingen--Biohacking_05.jpg"
 +
                                class="figure-img img-fluid rounded"
 +
                                alt="Placeholder"></a>
 +
                    </figure>
  
−
        <div class="col-12 col-md-6 pt-3" style="padding-right: 6vw;">
 
−
            <h2 class="display-4 mobileTitle" style="overflow-x: visible; font-family: 'Righteous';color:#2ecc71;">An in depth E.coli Nissle characterization</h2>
 
−
            <p class="text-justify mobileText">Despite the fact that E. Coli Nissle is an already
 
−
                approved probiotic, it's surprisingly badly characterized.</p>
 
−
 
−
            <p class="text-justify mobileText">
 
−
                Hence, we provide the first metabolic model of E. coli Nissle and optimize it's growth for various
 
−
                growth media. Furthermore, we predicted the interaction and competition of E. coli Nissle with common competitors for various fluxes in the gut.
 
−
            </p>
 
−
 
−
            <p class="text-justify mobileText">
 
−
                Finally, we carried out a series of RNA-Seq experiments to assess the adaptions and reactions of E. coli
 
−
                Nissle to aerobic, as well as anaerobic occurring stress factors.
 
−
            </p>
 
 
         </div>
 
         </div>
−
    </div>
+
        <div class="col-12 col-md-6 ">
−
    </div>
+
        <figure>
−
 
+
                        <a style="font-size: small"
−
    <div class="row pt-5 pb-3 ">
+
                          href="https://2019.igem.org/wiki/images/4/4d/T--Tuebingen--Biohacking_10.jpg"
−
        <div class="warningContent col-12 slide-in">
+
                          data-effect="mfp-zoom-out"
−
            <span class="align-middle" style="font-family: 'Righteous';color:#2ecc71;font-size: 3rem !important;">Bringing it all together</span>
+
                          title="Some title">
 +
                            <img src="https://2019.igem.org/wiki/images/4/4d/T--Tuebingen--Biohacking_10.jpg"
 +
                                class="figure-img img-fluid rounded"
 +
                                alt="Placeholder"></a>
 +
                    </figure>
 
         </div>
 
         </div>
−
    </div>
+
                    </div>
 +
                    <p>
 +
                        A lot of questions were asked during the <a href="https://2019.igem.org/wiki/images/1/13/T--Tuebingen--Panel_discussion_allg.pdf" onclick='window.open("https://2019.igem.org/wiki/images/1/13/T--Tuebingen--Panel_discussion_allg.pdf","_self");'>panel discussion</a> and the presentation. We discussed
 +
                        the ethical implications of the CRISPR / Cas Method with the audience. Surprisingly,
 +
                        many participants were eager to talk about scenarios they have heard about.
 +
                    </p>
 +
                </div>
 +
            </div>
  
−
    <div data-aos="zoom-out-right"
+
            <h3 style="font-family:'Righteous'; color:#2ecc71;">Outlook - Advisors of the Experimenta iGEM team 2020 & New student lab course</h3>
−
    data-aos-offset="200"
+
            <div class="row">
−
    data-aos-delay="50"
+
                <div class="col-12">
−
    data-aos-duration="2000"
+
                    <p>During the collaboration with the Experimenta Heilbronn, we sat together with Dr. Robert Friedrich
−
    data-aos-easing="ease-in-out-cubic"
+
                        and Norbert Hommrichhausen to discuss the foundation of an iGEM high school team at the Experimenta
−
    data-aos-mirror="true"
+
                        Heilbronn. The Experimenta is highly interested in starting a team in Heilbronn and the motivated
−
    data-aos-once="false">
+
                        and interested students encouraged us to team up and further pursue this plan. Plans for an iGEM
 +
                        high school team 2020 were made, in which the Experimenta Heilbronn will be the main partner
 +
                        providing lab space, supervision and funding. The role of the iGEM Team Tuebingen is that of
 +
                        experienced advisors, who can assist in questions concerning the iGEM competition itself, the
 +
                        workflow of an iGEM year, as well as deliver expert knowledge and guidance in the laboratory or
 +
                        in questions concerning bioinformatics, design and human practices. Both the Experimenta and the
 +
                        iGEM Team Tuebingen aim at establishing a long-term collaboration in the scope of iGEM.</p>
  
−
    <div class="row p-5" style="padding-left: 10vw; padding-right: 10vw;">
+
                    <p>
−
        <div class="col-12 col-md-6">
+
                        Next to the foundation of a high school iGEM team, the Experimenta will also introduce new lab
−
            <img class="img-fluid" src="https://2019.igem.org/wiki/images/3/3d/T--Tuebingen--New-Approach-transparent-Landing-page.png"
+
                        courses for school classes, one of them being a CRISPR/Cas course. The theoretical background,
−
                alt="meetUp" style="padding-left: 6vw;">
+
                        first steps and foundation of this course arose from the collaboration with iGEM Tuebingen this year.
 +
                        A more detailed outline and implementation of the course will be part of another collaboration
 +
                        between the Experimenta and iGEM Tuebingen.
 +
                    </p>
 +
                </div>
 +
            </div>
 
         </div>
 
         </div>
−
 
+
     </main>
−
 
+
−
        <div class="col-12 col-md-6 pt-3" style="padding-right: 6vw;">
+
−
            <h2 class="display-4 mobileTitle">Our work lays the foundation for an innovative, unprecedented approach to treat Diabetes Mellitus Type II.</h2>
+
−
        </div>
+
−
     </div>
+
 
</div>
 
</div>
−
 
 
</div>
 
</div>
  
−
<style>
 
−
 
−
.testclasse {
 
−
  margin: 0;
 
−
  background-color: #2ecc71;
 
−
  background-image: radial-gradient(#2ecc71 20%, #1b7a43 50%, rgba(0, 0, 0, 0.5) 100%);
 
−
  background-size: 120%;
 
−
  background-position: center;
 
−
  font-family: "Barlow Condensed", sans-serif;
 
−
  -webkit-animation: tighten-vinette ease-out 1800ms forwards;
 
−
          animation: tighten-vinette ease-out 1800ms forwards;
 
−
}
 
−
 
−
.babbelbubu .logo .kokosnusss {
 
−
    width: 120%; margin-left: -10%; margin-top: -45%;
 
−
  pointer-events: none;
 
−
  height: 90vh;
 
−
    top: 0;
 
−
    bottom: 0;
 
−
  right: 0;
 
−
  left: 0;
 
−
  position: relative;
 
−
  opacity: .6;
 
−
  z-index: 20;
 
−
  background-size: cover;
 
−
  background-position: center;
 
−
  background-image: url("https://static.comicvine.com/uploads/original/11124/111240517/4986890-4700382785-29908.jpg");
 
−
}
 
−
 
−
.babbelbubu {
 
−
  height: 80%;
 
−
  display: flex;
 
−
  align-items: center;
 
−
  justify-content: center;
 
−
}
 
−
 
−
.logo {
 
−
  cursor: pointer;
 
−
  text-align: center;
 
−
}
 
−
.logo:hover .restart {
 
−
  opacity: .8;
 
−
}
 
−
 
−
.restart {
 
−
  color: #fff;
 
−
  margin-top: 20px;
 
−
  font-size: 1.5rem;
 
−
  text-transform: uppercase;
 
−
  letter-spacing: -.08rem;
 
−
  transition: opacity 150ms linear;
 
−
}
 
−
 
−
.marvel, .studios {
 
−
  position: relative;
 
−
  color: #fff;
 
−
  text-transform: uppercase;
 
−
  letter-spacing: -.2rem;
 
−
  font-size: 5rem;
 
−
  margin: .05rem .05rem .5rem;
 
−
  padding: 0 0.4rem;
 
−
  display: inline-block;
 
−
    margin-top: 30%;
 
−
}
 
−
 
−
.studios {
 
−
  font-weight: 500;
 
−
  letter-spacing: -.3rem;
 
−
  -webkit-transform: translateX(-95px);
 
−
          transform: translateX(-95px);
 
−
}
 
−
 
−
.marvel {
 
−
  z-index: 10;
 
−
  font-weight: 800;
 
−
  -webkit-transform: translateX(95px);
 
−
          transform: translateX(95px);
 
−
}
 
−
.marvel:before {
 
−
  z-index: -10;
 
−
  content: '';
 
−
  display: block;
 
−
  background-color: #2ecc71;
 
−
  border: solid rgba(255, 255, 255, 0.2) 1px;
 
−
  height: 100%;
 
−
  width: 100%;
 
−
  position: absolute;
 
−
  top: 0;
 
−
  left: 0;
 
−
}
 
−
 
−
.studios:after, .studios:before {
 
−
  content: '';
 
−
  display: block;
 
−
  height: 3px;
 
−
  position: absolute;
 
−
  background-color: #fff;
 
−
  display: block;
 
−
  left: 0.4rem;
 
−
  right: 0.4rem;
 
−
}
 
−
 
−
.studios:before {
 
−
  top: 0;
 
−
}
 
−
.studios:after {
 
−
  bottom: 0;
 
−
}
 
−
 
−
@media screen and (max-width: 900px) and (max-height: 1170px) {
 
−
    .babbelbubu .logo .kokosnusss {
 
−
        margin-top: -90%;
 
−
        width: 100%;
 
−
        margin-left: 0;
 
−
    }
 
−
}
 
−
 
−
@media screen and (max-width: 500px) and (max-height: 750px) {
 
−
    .babbelbubu .logo .kokosnusss {
 
−
        margin-top: -120%;
 
−
        width: 100%;
 
−
        margin-left: 0;
 
−
    }
 
−
 
−
    .marvel, .studios {
 
−
        font-size: 3rem;
 
−
    }
 
−
}
 
−
 
−
@media screen and (max-width: 420px) and (max-height: 850px) {
 
−
    .babbelbubu .logo .kokosnusss {
 
−
        margin-top: -140%;
 
−
        width: 100%;
 
−
        margin-left: 0;
 
−
    }
 
−
 
−
    .marvel, .studios {
 
−
        font-size: 3rem;
 
−
    }
 
−
}
 
−
 
−
.wrapper.run-animation .restart {
 
−
  opacity: 0;
 
−
  -webkit-animation: fade-down 1200ms ease 3600ms forwards;
 
−
          animation: fade-down 1200ms ease 3600ms forwards;
 
−
}
 
−
 
−
.babbelbubu.run-animation {
 
−
  -webkit-animation: shrink ease-out 4800ms forwards 600ms;
 
−
          animation: shrink ease-out 4800ms forwards 600ms;
 
−
}
 
−
 
−
.babbelbubu.run-animation .marvel {
 
−
  -webkit-transform: translateX(95px);
 
−
          transform: translateX(95px);
 
−
  -webkit-animation: slide-out-X 750ms ease forwards;
 
−
          animation: slide-out-X 750ms ease forwards;
 
−
}
 
−
.babbelbubu.run-animation .studios {
 
−
  -webkit-transform: translateX(-95px);
 
−
          transform: translateX(-95px);
 
−
  color: transparent;
 
−
  -webkit-animation: slide-out-X 750ms ease forwards, show-text 300ms linear forwards 1500ms;
 
−
          animation: slide-out-X 750ms ease forwards, show-text 300ms linear forwards 1500ms;
 
−
}
 
−
.babbelbubu.run-animation .studios:before {
 
−
  -webkit-transform: translateY(2.9rem);
 
−
          transform: translateY(2.9rem);
 
−
  -webkit-animation: slide-out-Y 300ms ease forwards 750ms;
 
−
          animation: slide-out-Y 300ms ease forwards 750ms;
 
−
}
 
−
.babbelbubu.run-animation .studios:after {
 
−
  -webkit-transform: translateY(-2.9rem);
 
−
          transform: translateY(-2.9rem);
 
−
  -webkit-animation: slide-out-Y 300ms ease forwards 750ms;
 
−
          animation: slide-out-Y 300ms ease forwards 750ms;
 
−
}
 
−
 
−
.babbelbubu.run-animation .logo .kokosnusss {
 
−
  -webkit-animation: flicker-images 1500ms 2 steps(1, end), fade-out 4500ms forwards;
 
−
          animation: flicker-images 1500ms 2 steps(1, end), fade-out 4500ms forwards;
 
−
}
 
−
 
−
@-webkit-keyframes slide-out-X {
 
−
  100% {
 
−
    -webkit-transform: translateX(0);
 
−
            transform: translateX(0);
 
−
  }
 
−
}
 
−
 
−
@keyframes slide-out-X {
 
−
  100% {
 
−
    -webkit-transform: translateX(0);
 
−
            transform: translateX(0);
 
−
  }
 
−
}
 
−
@-webkit-keyframes slide-out-Y {
 
−
  100% {
 
−
    -webkit-transform: translateY(0);
 
−
            transform: translateY(0);
 
−
  }
 
−
}
 
−
@keyframes slide-out-Y {
 
−
  100% {
 
−
    -webkit-transform: translateY(0);
 
−
            transform: translateY(0);
 
−
  }
 
−
}
 
−
@-webkit-keyframes show-text {
 
−
  100% {
 
−
    color: #fff;
 
−
  }
 
−
}
 
−
@keyframes show-text {
 
−
  100% {
 
−
    color: #fff;
 
−
  }
 
−
}
 
−
@-webkit-keyframes shrink {
 
−
  100% {
 
−
    -webkit-transform: scale(0.8);
 
−
            transform: scale(0.8);
 
−
  }
 
−
}
 
−
@keyframes shrink {
 
−
  100% {
 
−
    -webkit-transform: scale(0.8);
 
−
            transform: scale(0.8);
 
−
  }
 
−
}
 
−
@-webkit-keyframes tighten-vinette {
 
−
  100% {
 
−
    background-size: 120%;
 
−
  }
 
−
}
 
−
@keyframes tighten-vinette {
 
−
  100% {
 
−
    background-size: 120%;
 
−
  }
 
−
}
 
−
@-webkit-keyframes fade-down {
 
−
  0% {
 
−
    -webkit-transform: translateY(-2rem);
 
−
            transform: translateY(-2rem);
 
−
    opacity: 0;
 
−
  }
 
−
  100% {
 
−
    -webkit-transform: translateY(0);
 
−
            transform: translateY(0);
 
−
    opacity: .5;
 
−
  }
 
−
}
 
−
@keyframes fade-down {
 
−
  0% {
 
−
    -webkit-transform: translateY(-2rem);
 
−
            transform: translateY(-2rem);
 
−
    opacity: 0;
 
−
  }
 
−
  100% {
 
−
    -webkit-transform: translateY(0);
 
−
            transform: translateY(0);
 
−
    opacity: .5;
 
−
  }
 
−
}
 
−
@-webkit-keyframes fade-out {
 
−
  100% {
 
−
    opacity: 0;
 
−
  }
 
−
}
 
−
@keyframes fade-out {
 
−
  100% {
 
−
    opacity: 0;
 
−
  }
 
−
}
 
−
@-webkit-keyframes flicker-images {
 
−
  0% {
 
−
    background-image: url("https://i.ytimg.com/vi/lhgrYaBmplY/maxresdefault.jpg");
 
−
  }
 
−
  10% {
 
−
    background-image: url("https://doomrocket.com/wp-content/uploads/2014/08/IMG_4527.png");
 
−
  }
 
−
  20% {
 
−
    background-image: url("https://www.nerdmuch.com/wp-content/uploads/2016/02/funny-deadpool.jpg");
 
−
  }
 
−
  30% {
 
−
    background-image: url("https://i.pinimg.com/736x/b4/e0/d5/b4e0d51ab9af14198f733ca582d06794--geek-things-geek-art.jpg");
 
−
  }
 
−
  40% {
 
−
    background-image: url("https://images.fastcompany.net/image/upload/w_1280,f_auto,q_auto,fl_lossy/fc/3025621-poster-p-1-ka-pow-marvel-opens-massive-comic-book-images-archive-and-api-to-fans-developers.jpg");
 
−
  }
 
−
  50% {
 
−
    background-image: url("http://nerdist.com/wp-content/uploads/2015/03/captain-america-iron-man-civil-war-1024x597.jpg");
 
−
  }
 
−
  60% {
 
−
    background-image: url("https://geekreply.com/wp-content/uploads/2015/05/watchmen.jpg");
 
−
  }
 
−
  70% {
 
−
    background-image: url("http://cdn.playbuzz.com/cdn/3c096341-2a6c-4ae6-bb76-3973445cfbcf/6b938520-4962-403a-9ce3-7bf298918cad.jpg");
 
−
  }
 
−
  80% {
 
−
    background-image: url("http://cdn.wegotthiscovered.com/wp-content/uploads/2016/05/Storm-and-Black-Panther-marriage.jpg");
 
−
  }
 
−
  90% {
 
−
    background-image: url("https://am21.akamaized.net/tms/cnt/uploads/2014/01/Black-Widow-70s-Suit-3-580x270.jpg");
 
−
  }
 
−
  100% {
 
−
    background-image: url("https://i.ytimg.com/vi/lhgrYaBmplY/maxresdefault.jpg");
 
−
  }
 
−
}
 
−
@keyframes flicker-images {
 
−
  0% {
 
−
    background-image: url("https://i.ytimg.com/vi/lhgrYaBmplY/maxresdefault.jpg");
 
−
  }
 
−
  10% {
 
−
    background-image: url("https://doomrocket.com/wp-content/uploads/2014/08/IMG_4527.png");
 
−
  }
 
−
  20% {
 
−
    background-image: url("https://www.nerdmuch.com/wp-content/uploads/2016/02/funny-deadpool.jpg");
 
−
  }
 
−
  30% {
 
−
    background-image: url("https://i.pinimg.com/736x/b4/e0/d5/b4e0d51ab9af14198f733ca582d06794--geek-things-geek-art.jpg");
 
−
  }
 
−
  40% {
 
−
    background-image: url("https://images.fastcompany.net/image/upload/w_1280,f_auto,q_auto,fl_lossy/fc/3025621-poster-p-1-ka-pow-marvel-opens-massive-comic-book-images-archive-and-api-to-fans-developers.jpg");
 
−
  }
 
−
  50% {
 
−
    background-image: url("http://nerdist.com/wp-content/uploads/2015/03/captain-america-iron-man-civil-war-1024x597.jpg");
 
−
  }
 
−
  60% {
 
−
    background-image: url("https://geekreply.com/wp-content/uploads/2015/05/watchmen.jpg");
 
−
  }
 
−
  70% {
 
−
    background-image: url("http://cdn.playbuzz.com/cdn/3c096341-2a6c-4ae6-bb76-3973445cfbcf/6b938520-4962-403a-9ce3-7bf298918cad.jpg");
 
−
  }
 
−
  80% {
 
−
    background-image: url("http://cdn.wegotthiscovered.com/wp-content/uploads/2016/05/Storm-and-Black-Panther-marriage.jpg");
 
−
  }
 
−
  90% {
 
−
    background-image: url("https://am21.akamaized.net/tms/cnt/uploads/2014/01/Black-Widow-70s-Suit-3-580x270.jpg");
 
−
  }
 
−
  100% {
 
−
    background-image: url("https://i.ytimg.com/vi/lhgrYaBmplY/maxresdefault.jpg");
 
−
  }
 
−
}
 
−
 
−
</style>
 
−
 
−
 
−
 
−
<div class="testclasse">
 
−
 
−
<div class="babbelbubu run-animation" id="ananananananas">
 
−
<div class="logo">
 
−
 
−
        <span class="marvel" > <a href="https://www.google.com" style="color: #fff;text-decoration: none;">View our</a></span>
 
−
<span class="studios" > <a href="https://www.google.com" style="color: #fff;text-decoration: none;">Story</a></span>
 
−
 
−
        <div class="restart">Restart</div>
 
−
 
−
        <div class="kokosnusss"></div>
 
−
</div>
 
−
 
−
</div>
 
−
 
−
 
−
 
−
    </div>
 
  
  
 +
<script src="https://2019.igem.org/Team:Tuebingen/sidebarJS?action=raw&ctype=text/javascript"></script>
  
 +
<script src="https://2019.igem.org/Team:Tuebingen/smoothScrollJS?action=raw&ctype=text/javascript"></script>
 
<script>
 
<script>
−
    element = document.getElementById("ananananananas");
+
var scroll = new SmoothScroll('a[href*="#"]');
−
 
+
−
if (element) {
+
−
// reset the transition by...
+
−
element.addEventListener("mouseenter", function(e) {
+
−
e.preventDefault;
+
−
 
+
−
console.log('element', element.classList);
+
−
 
+
−
// removing the class
+
−
element.classList.remove("run-animation");
+
−
 
+
−
// triggering reflow
+
−
void element.offsetWidth;
+
−
 
+
−
// and re-adding the class
+
−
element.classList.add("run-animation");
+
−
}, false);
+
−
 
+
−
element.addEventListener("click", function(e) {
+
−
e.preventDefault;
+
−
 
+
−
console.log('element', element.classList);
+
−
 
+
−
// removing the class
+
−
element.classList.remove("run-animation");
+
−
 
+
−
// triggering reflow
+
−
void element.offsetWidth;
+
−
 
+
−
// and re-adding the class
+
−
element.classList.add("run-animation");
+
−
}, false);
+
−
}
+
 
</script>
 
</script>
 +
<script src="https://2019.igem.org/Team:Tuebingen/magni-popup-minJS?action=raw&ctype=text/javascript"></script>
 +
<script src="https://2019.igem.org/Team:Tuebingen/popup-imagesJS?action=raw&ctype=text/javascript"></script>
  
−
<div class='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'>
−
            <div class='col-6 col-md-2 sponsorLogo text-center'>
+
                    <div class='col-6 col-md-2 sponsorLogo text-center'>
−
                <a href="https://www.stura-tuebingen.de/" target="_blank2"><img class="img-fluid"
+
                        <a href="https://www.stura-tuebingen.de/" target="_blank2"><img class="img-fluid"
−
                                                                                src="https://2019.igem.org/wiki/images/1/10/T--Tuebingen--stura_logo.png"
+
                                                                                      src="https://2019.igem.org/wiki/images/1/10/T--Tuebingen--stura_logo.png"
−
                                                                                style="max-height: 80px;"></a>
+
                                                                                      style="max-height: 80px;"></a>
−
            </div>
+
                    </div>
−
            <div class='col-6 col-md-2 sponsorLogo text-center'>
+
                    <div class='col-6 col-md-2 sponsorLogo text-center'>
−
                <a href="https://www.embl.de/" target="_blank2"><img class="img-fluid"
+
                        <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"
+
                                                                            src="https://2019.igem.org/wiki/images/c/c4/T--Tuebingen--embl_logo.png"
−
                                                                    style="max-height: 80px;"></a>
+
                                                                            style="max-height: 80px;"></a>
−
            </div>
+
                    </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"
−
                                                                              src="https://2019.igem.org/wiki/images/9/99/T--Tuebingen--kohlbacher_logo.png"
+
                                                                                      src="https://2019.igem.org/wiki/images/9/99/T--Tuebingen--kohlbacher_logo.png"
−
                                                                              style="max-height: 80px;"></a>
+
                                                                                      style="max-height: 80px;"></a>
−
            </div>
+
                    </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.dieter-schwarz-stiftung.de/homepage.html" target="_blank2"><img class="img-fluid"
+
                        <a href="https://www.dieter-schwarz-stiftung.de/homepage.html" target="_blank2"><img class="img-fluid"
−
                                                                                                    src="https://2019.igem.org/wiki/images/8/86/T--Tuebingen--LogoDSS.png"
+
                                                                                      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>
−
            <div class='col-6 col-md-2 sponsorLogo text-center'>
+
                    <div class='col-6 col-md-2 sponsorLogo text-center'>
−
                <a href="https://www.experimenta.science/en/" target="_blank2"><img class="img-fluid"
+
                        <a href="https://www.experimenta.science/en/" target="_blank2"><img class="img-fluid"
−
                                                                                    src="https://2019.igem.org/wiki/images/e/eb/T--Tuebingen--Logo-Experimenta.png"
+
                                                                                            src="https://2019.igem.org/wiki/images/e/eb/T--Tuebingen--Logo-Experimenta.png"
−
                                                                                    style="max-height: 80px;"></a>
+
−
            </div>
+
−
            <div class='col-6 col-md-2 sponsorLogo text-center'>
+
−
                <a href="https://www.zmbp.uni-tuebingen.de/zmbp.html" target="_blank2"><img class="img-fluid"
+
−
                                                                                            src="https://2019.igem.org/wiki/images/d/d8/T--Tuebingen--zmbp_logo.png"
+
 
                                                                                             style="max-height: 80px;"></a>
 
                                                                                             style="max-height: 80px;"></a>
−
            </div>
+
                    </div>
 +
                    <div class='col-6 col-md-2 sponsorLogo text-center'>
 +
                      <a href="https://www.zmbp.uni-tuebingen.de/zmbp.html" target="_blank2"><img class="img-fluid"
 +
                                                                                                src="https://2019.igem.org/wiki/images/d/d8/T--Tuebingen--zmbp_logo.png"
 +
                                                                                                style="max-height: 80px;"></a>
 +
                    </div>
 +
                </div>
  
 +
                <hr>
 +
                <div class='row align-items-center'>
 +
                    <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
 +
                        <a href="https://www.lexogen.com/" target="_blank2"><img class="img-fluid"
 +
                                                                                src="https://2019.igem.org/wiki/images/4/43/T--Tuebingen--lexogen_logo.png"></a>
 +
                    </div>
 +
                    <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
 +
                        <a href="http://s466755640.online.de/4bl/" target="_blank2"><img class="img-fluid"
 +
                                                                                        src="https://2019.igem.org/wiki/images/0/0b/T--Tuebingen--4base_logo.png"></a>
 +
                    </div>
 +
                    <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
 +
                        <a href="https://www.agilent.com/" target="_blank2"><img class="img-fluid"
 +
                                                                                src="https://2019.igem.org/wiki/images/e/e7/T--Tuebingen--agilent_logo.png"></a>
 +
                    </div>
 +
                    <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
 +
                        <a href="https://www.digitalocean.com/" target="_blank2"><img class="img-fluid"
 +
                                                                                      src="https://2019.igem.org/wiki/images/6/67/T--Tuebingen--digitalocean_logo.png"></a>
 +
                    </div>
 +
                    <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
 +
                        <a href="https://dwk.com/" target="_blank2"><img class="img-fluid"
 +
                                                                        src="https://2019.igem.org/wiki/images/c/ce/T--Tuebingen--dwk_logo.png"></a>
 +
                    </div>
 +
                    <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
 +
                        <a href="https://www.eppendorf.com/" target="_blank2"><img class="img-fluid"
 +
                                                                                  src="https://2019.igem.org/wiki/images/a/a6/T--Tuebingen--eppendorf_logo.png"></a>
 +
                    </div>
 +
                    <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
 +
                        <a href="https://www.implen.de/" target="_blank2"><img class="img-fluid"
 +
                                                                              src="https://2019.igem.org/wiki/images/b/bb/T--Tuebingen--Logo-Implen.png"></a>
 +
                    </div>
 +
                    <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
 +
                        <a href="https://www.jenabioscience.com/" target="_blank2"><img class="img-fluid"
 +
                                                                                        src="https://2019.igem.org/wiki/images/3/31/T--Tuebingen--JBS_logo.png"></a>
 +
                    </div>
 +
                    <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
 +
                        <a href="https://www.gbo.com/" target="_blank2"><img class="img-fluid"
 +
                                                                            src="https://2019.igem.org/wiki/images/a/ae/T--Tuebingen--greiner_logo.png"></a>
 +
                    </div>
 +
                    <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
 +
                        <a href="http://www.metabion.com/" target="_blank2"><img class="img-fluid"
 +
                                                                                src="https://2019.igem.org/wiki/images/4/41/T--Tuebingen--Logo-Metabion.png"></a>
 +
                    </div>
 +
                    <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
 +
                        <a href="https://www.microsynth.ch/home-ch.html" target="_blank2"><img class="img-fluid"
 +
                                                                                              src="https://2019.igem.org/wiki/images/1/18/T--Tuebingen--microsynth_logo.png"></a>
 +
                    </div>
 +
                    <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
 +
                        <a href="https://www.neb.com/" target="_blank2"><img class="img-fluid"
 +
                                                                            src="https://2019.igem.org/wiki/images/2/29/T--Tuebingen--neb_logo.png"></a>
 +
                    </div>
 +
                </div>
  
−
            <!--
+
                <div class='row align-items-center'>
−
<div class='col sponsorLogo'>
+
                    <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
−
<a href="https://www.grk2062.uni-muenchen.de/index.html" target="_blank2" ><img class="img-fluid" src="http://2018.igem.org/wiki/images/f/fe/T--Munich--GRK2062.png" style="max-height: 70px;"></a>
+
                        <a href="https://www.promega.de/en/" target="_blank2"><img class="img-fluid"
 +
                                                                                  src="https://2019.igem.org/wiki/images/f/f8/T--Tuebingen--promega_logo.png"></a>
 +
                    </div>
 +
                    <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
 +
                        <a href="https://www.qiagen.com/us/" target="_blank2"><img class="img-fluid"
 +
                                                                                  src="https://2019.igem.org/wiki/images/9/92/T--Tuebingen--qiagen_logo.png"></a>
 +
                    </div>
 +
                    <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
 +
                        <a href="https://www.carlroth.com/en/en" target="_blank2"><img class="img-fluid"
 +
                                                                                      src="https://2019.igem.org/wiki/images/6/61/T--Tuebingen--roth_logo.png"></a>
 +
                    </div>
 +
                    <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
 +
                        <a href="https://www.sitoolsbiotech.com/" target="_blank2"><img class="img-fluid"
 +
                                                                                        src="https://2019.igem.org/wiki/images/3/31/T--Tuebingen--sibiotools_logo.png"></a>
 +
                    </div>
 +
                    <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
 +
                        <a href="https://www.snapgene.com/" target="_blank2"><img class="img-fluid"
 +
                                                                                  src="https://2019.igem.org/wiki/images/3/3a/T--Tuebingen--snapgene_logo.png"></a>
 +
                    </div>
 +
                    <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
 +
                        <a href="https://www.trilinkbiotech.com/" target="_blank2"><img class="img-fluid"
 +
                                                                                        src="https://2019.igem.org/wiki/images/b/b6/T--Tuebingen--trilink_logo.png"></a>
 +
                    </div>
 +
                    <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
 +
                        <a href="https://twistbioscience.com/" target="_blank2"><img class="img-fluid"
 +
                                                                                    src="https://2019.igem.org/wiki/images/4/4c/T--Tuebingen--Logo-Twist.png"></a>
 +
                    </div>
 +
                    <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
 +
                        <a href="http://www.vazymebiotech.com/" target="_blank2"><img class="img-fluid"
 +
                                                                                      src="https://2019.igem.org/wiki/images/b/b7/T--Tuebingen--vazyme_logo.png"></a>
 +
                    </div>
 +
                    <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
 +
                        <a href="https://www.biolegend.com/" target="_blank2"><img class="img-fluid"
 +
                                                                                  src="https://2019.igem.org/wiki/images/c/c3/T--Tuebingen--biolegend_logo.png"></a>
 +
                    </div>
 +
                    <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
 +
                        <a href="https://www.zymoresearch.de/" target="_blank2"><img class="img-fluid"
 +
                                                                                    src="https://2019.igem.org/wiki/images/6/6e/T--Tuebingen--zymo_logo.png"></a>
 +
                    </div>
 +
                </div>
 
</div>
 
</div>
−
-->
+
<script src="https://2019.igem.org/Team:Tuebingen/magni-popup-minJS?action=raw&ctype=text/javascript"></script>
−
        </div>
+
<script src="https://2019.igem.org/Team:Tuebingen/popup-imagesJS?action=raw&ctype=text/javascript"></script>
−
 
+
<div class="visualClear"></div>
−
        <hr>
+
−
        <div class='row align-items-center'>
+
−
            <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
−
                <a href="https://www.lexogen.com/" target="_blank2"><img class="img-fluid"
+
−
                                                                        src="https://2019.igem.org/wiki/images/4/43/T--Tuebingen--lexogen_logo.png"></a>
+
−
            </div>
+
−
            <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
−
                <a href="http://s466755640.online.de/4bl/" target="_blank2"><img class="img-fluid"
+
−
                                                                                src="https://2019.igem.org/wiki/images/0/0b/T--Tuebingen--4base_logo.png"></a>
+
−
            </div>
+
−
            <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
−
                <a href="https://www.agilent.com/" target="_blank2"><img class="img-fluid"
+
−
                                                                        src="https://2019.igem.org/wiki/images/e/e7/T--Tuebingen--agilent_logo.png"></a>
+
−
            </div>
+
−
            <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
−
                <a href="https://www.digitalocean.com/" target="_blank2"><img class="img-fluid"
+
−
                                                                              src="https://2019.igem.org/wiki/images/6/67/T--Tuebingen--digitalocean_logo.png"></a>
+
−
            </div>
+
−
            <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
−
                <a href="https://dwk.com/" target="_blank2"><img class="img-fluid"
+
−
                                                                src="https://2019.igem.org/wiki/images/c/ce/T--Tuebingen--dwk_logo.png"></a>
+
−
            </div>
+
−
            <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
−
                <a href="https://www.eppendorf.com/" target="_blank2"><img class="img-fluid"
+
−
                                                                          src="https://2019.igem.org/wiki/images/a/a6/T--Tuebingen--eppendorf_logo.png"></a>
+
−
            </div>
+
−
            <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
−
                <a href="https://www.implen.de/" target="_blank2"><img class="img-fluid"
+
−
                                                                      src="https://2019.igem.org/wiki/images/b/bb/T--Tuebingen--Logo-Implen.png"></a>
+
−
            </div>
+
−
            <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
−
                <a href="https://www.jenabioscience.com/" target="_blank2"><img class="img-fluid"
+
−
                                                                                src="https://2019.igem.org/wiki/images/3/31/T--Tuebingen--JBS_logo.png"></a>
+
−
            </div>
+
−
            <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
−
                <a href="https://www.gbo.com/" target="_blank2"><img class="img-fluid"
+
−
                                                                    src="https://2019.igem.org/wiki/images/a/ae/T--Tuebingen--greiner_logo.png"></a>
+
−
            </div>
+
−
            <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
−
                <a href="http://www.metabion.com/" target="_blank2"><img class="img-fluid"
+
−
                                                                        src="https://2019.igem.org/wiki/images/4/41/T--Tuebingen--Logo-Metabion.png"></a>
+
−
            </div>
+
−
            <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
−
                <a href="https://www.microsynth.ch/home-ch.html" target="_blank2"><img class="img-fluid"
+
−
                                                                                      src="https://2019.igem.org/wiki/images/1/18/T--Tuebingen--microsynth_logo.png"></a>
+
−
            </div>
+
−
            <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
−
                <a href="https://www.neb.com/" target="_blank2"><img class="img-fluid"
+
−
                                                                    src="https://2019.igem.org/wiki/images/2/29/T--Tuebingen--neb_logo.png"></a>
+
−
            </div>
+
−
        </div>
+
−
 
+
−
        <div class='row align-items-center'>
+
−
            <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
−
                <a href="https://www.promega.de/en/" target="_blank2"><img class="img-fluid"
+
−
                                                                          src="https://2019.igem.org/wiki/images/f/f8/T--Tuebingen--promega_logo.png"></a>
+
−
            </div>
+
−
            <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
−
                <a href="https://www.qiagen.com/us/" target="_blank2"><img class="img-fluid"
+
−
                                                                          src="https://2019.igem.org/wiki/images/9/92/T--Tuebingen--qiagen_logo.png"></a>
+
−
            </div>
+
−
            <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
−
                <a href="https://www.carlroth.com/en/en" target="_blank2"><img class="img-fluid"
+
−
                                                                              src="https://2019.igem.org/wiki/images/6/61/T--Tuebingen--roth_logo.png"></a>
+
−
            </div>
+
−
            <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
−
                <a href="https://www.sitoolsbiotech.com/" target="_blank2"><img class="img-fluid"
+
−
                                                                                src="https://2019.igem.org/wiki/images/3/31/T--Tuebingen--sibiotools_logo.png"></a>
+
−
            </div>
+
−
            <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
−
                <a href="https://www.snapgene.com/" target="_blank2"><img class="img-fluid"
+
−
                                                                          src="https://2019.igem.org/wiki/images/3/3a/T--Tuebingen--snapgene_logo.png"></a>
+
−
            </div>
+
−
            <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
−
                <a href="https://www.trilinkbiotech.com/" target="_blank2"><img class="img-fluid"
+
−
                                                                                src="https://2019.igem.org/wiki/images/b/b6/T--Tuebingen--trilink_logo.png"></a>
+
−
            </div>
+
−
            <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
−
                <a href="https://twistbioscience.com/" target="_blank2"><img class="img-fluid"
+
−
                                                                            src="https://2019.igem.org/wiki/images/4/4c/T--Tuebingen--Logo-Twist.png"></a>
+
−
            </div>
+
−
            <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
−
                <a href="http://www.vazymebiotech.com/" target="_blank2"><img class="img-fluid"
+
−
                                                                              src="https://2019.igem.org/wiki/images/b/b7/T--Tuebingen--vazyme_logo.png"></a>
+
−
            </div>
+
−
            <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
−
                <a href="https://www.biolegend.com/" target="_blank2"><img class="img-fluid"
+
−
                                                                          src="https://2019.igem.org/wiki/images/c/c3/T--Tuebingen--biolegend_logo.png"></a>
+
−
            </div>
+
−
            <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
−
                <a href="https://www.zymoresearch.de/" target="_blank2"><img class="img-fluid"
+
−
                                                                            src="https://2019.igem.org/wiki/images/6/6e/T--Tuebingen--zymo_logo.png"></a>
+
−
            </div>
+
−
 
+
−
        </div>
+
−
    </div>
+
 
</html>
 
</html>

Latest revision as of 21:49, 19 October 2019

GLP.exe

Experimenta

The Experimenta Science Center Heilbronn

The Experimenta Science Center (Experimenta) in Heilbronn, Baden-Wuerttemberg, Germany offers science at your fingertips on an area of around 25,000 square metres with around 275 interactive exhibits, four creative studios and nine laboratories, as well as an observatory and an extraordinary science dome with spectacular science shows. Additionally, last year, they set up the “Schülerforschungszentrum” (SFZ), where young researchers are actively supported in their initial scientific work. It is directed at students from high schools in Heilbronn. Their general idea is to encourage students to develop their own projects while funding, lab space and supervision is granted.

Our 4 Day Lab Course

The course was held in a collaborative manner over a span of four days. Dr. Robert Friedrich, a biologist working for the SFZ, gave the general lab introduction and provided the overall lab responsibility, while we were mainly responsible to teach the required theoretical background, introduce bioinformatics data analysis (DNA-Seq) and finally project development. Additionally, we were supporting Dr. Friedrich during the experiments and closely supervised the students.

Placeholder

We conveyed the required theoretical background in a modern and interactive way, with the use of smart boards and current web tools. We focused on teaching the highly motivated students cutting-edge research, while providing a theoretical foundation, preparing them for different biology competitions and eventually university.

Placeholder
Placeholder

Please check out the material we prepared for the course - a script covering all the theoretical background and a presentation:

Please see the schedule below.

Placeholder

Due to the interactive design of the course, we also discussed the experiments with the students and tried to summarize what we did on the blackboard:

Placeholder
Placeholder

The students were also very interested in iGEM and our work. Hence, we not only introduced iGEM and our project to them, but also let them critically evaluate our project. They were also given the chance to conduct PCRs related to our project and could therefore gain insights into the upcoming challenges when starting a new project or experiment where not everything has been optimised for easy functionality. Many students were interested in the iGEM competition itself and in the process of finding a project and making it feasible. Therefore, we also invested into giving valuable input and advice on starting a project and encouraged the students to participate in iGEM or similar projects themselves. Several questions and concerns relating the functionality of our probiotic under different conditions, such as patients taking medications or antibiotics were also raised by the students. These fruitful discussions, as well as our exchange with several experts, contributed to the final design of our RNA-Seq experiment providing valuable input and different aspects to be considered [Experts, Nissle].

Due to the high interest of the students and the positive feedback from the Experimenta itself, we discussed the possibility of creating an iGEM high school team in Heilbronn in 2020. The Experimenta is highly interested in participating in iGEM 2020 with motivated students and will provide the required laboratories, supervision and funding. Our team will still be serving as advisors for the planned iGEM high school team next year. Furthermore, a new student lab course on CRISPR/Cas will be introduced at the Experimenta on the grounds of the theoretical background, input and inspiration iGEM Tuebingen conveyed.

Panel Discussion - „Biohacking – genetic experiments done at home“

In addition to the lab course, we also decided to host a panel discussion at the Experimenta. At the beginning of the panel discussion, we gave a talk about on the CRISPR / Cas method itself. We also included an overview of our ongoing project and the iGEM competition in general.

In collaboration with Dr. Robert Friedrich, we designed a discussion around the status of current research on CRISPR / Cas, the effectiveness of the method and its limitations, the prospects of future CRISPR / Cas developments, the availability and legality of so-called Do-It-Yourself CRISPR / Cas Kits and the ethical implications on society. The panel consisted out of Prof. Dr. Christoph Thyssen (Christoph Thyssen), an expert for subject didactics in biology and two of our team members - Marietheres Evers and Famke Baeuerle.

Placeholder
Placeholder

A lot of questions were asked during the panel discussion and the presentation. We discussed the ethical implications of the CRISPR / Cas Method with the audience. Surprisingly, many participants were eager to talk about scenarios they have heard about.

Outlook - Advisors of the Experimenta iGEM team 2020 & New student lab course

During the collaboration with the Experimenta Heilbronn, we sat together with Dr. Robert Friedrich and Norbert Hommrichhausen to discuss the foundation of an iGEM high school team at the Experimenta Heilbronn. The Experimenta is highly interested in starting a team in Heilbronn and the motivated and interested students encouraged us to team up and further pursue this plan. Plans for an iGEM high school team 2020 were made, in which the Experimenta Heilbronn will be the main partner providing lab space, supervision and funding. The role of the iGEM Team Tuebingen is that of experienced advisors, who can assist in questions concerning the iGEM competition itself, the workflow of an iGEM year, as well as deliver expert knowledge and guidance in the laboratory or in questions concerning bioinformatics, design and human practices. Both the Experimenta and the iGEM Team Tuebingen aim at establishing a long-term collaboration in the scope of iGEM.

Next to the foundation of a high school iGEM team, the Experimenta will also introduce new lab courses for school classes, one of them being a CRISPR/Cas course. The theoretical background, first steps and foundation of this course arose from the collaboration with iGEM Tuebingen this year. A more detailed outline and implementation of the course will be part of another collaboration between the Experimenta and iGEM Tuebingen.