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