Difference between revisions of "Team:UMaryland"

Line 1: Line 1:
−
{{UMaryland}}
 
 
<html>
 
<html>
 +
<head>
  
 +
<link href="https://fonts.googleapis.com/css?family=Raleway:200,300,400,500,700" rel="stylesheet">
 +
 +
</head>
 +
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
 +
<style>
 +
html {
 +
background-image: url('img/home.jpg');
 +
background-size: cover;
 +
background-repeat: no-repeat;
 +
background-attachment: fixed;
 +
background-position: center;
 +
color: white;
 +
font-family: 'Raleway', sans-serif;
 +
font-weight: 300;
 +
}
 +
 +
body {
 +
min-width: 5000px;
 +
min-height: 5000px;
 +
max-width: 5000px;
 +
max-height: 5000px;
 +
position: absolute;
 +
overflow: hidden;
 +
}
 +
 +
.pageCanvas {
 +
min-width: 5000px;
 +
min-height: 5000px;
 +
max-width: 5000px;
 +
max-height: 5000px;
 +
position: absolute;
 +
overflow: hidden;
 +
}
 +
 +
 +
/* Main */
 +
 +
 +
.h1 {
 +
font-size: 48pt;
 +
color: white;
 +
font-family: 'Raleway', sans-serif;
 +
width: 650px;;
 +
height: 150px;
 +
position: absolute;
 +
top: 2100px;
 +
left: 250px;
 +
}
 +
 +
.blockContainer {
 +
position: absolute;
 +
left: 1000px;
 +
top: 2000px;
 +
width: 450px;
 +
height: 450px;
 +
}
 +
 +
.h1 p, .block p {
 +
margin: 0px 0px 0px 0px;
 +
}
 +
 +
.mainBlock .block {
 +
width: 200px;
 +
height: 200px;
 +
border: 2px solid;
 +
font-size: 20pt;
 +
font-weight: bold;
 +
text-align: left;
 +
vertical-align: middle;
 +
position: fixed;
 +
border-radius: 40px;
 +
transition: all 0.2s ease-out;
 +
}
 +
 +
.mainBlock .block p:nth-child(1) {
 +
vertical-align: middle;
 +
margin-top: 50px;
 +
margin-left: 25px;
 +
text-transform: uppercase;
 +
 +
}
 +
.mainBlock .block > p:nth-child(2) {
 +
vertical-align: middle;
 +
margin-top: 10px;
 +
margin-left: 25px;
 +
font-size: 12pt;
 +
font-weight: 300;
 +
max-width: 160px;
 +
color: #F0F0F0;
 +
}
 +
 +
.mainBlock .block:nth-child(1) {
 +
border-color: rgba(173, 222, 255, 1);
 +
background-color: rgba(173, 222, 255, 0.7);
 +
}
 +
 +
.mainBlock .block:nth-child(2) {
 +
border-color: rgba(255, 206, 173, 1);
 +
margin-left: 240px;
 +
background-color: rgba(255, 206, 173, 0.7);
 +
}
 +
.mainBlock .block:nth-child(3) {
 +
border-color: rgba(181, 255, 173, 1);
 +
background-color: rgba(181, 255, 173, 0.7);
 +
margin-top: 240px;
 +
margin-left: 240px;
 +
}
 +
.mainBlock .block:nth-child(4) {
 +
border-color: rgba(247, 173, 255, 1);
 +
background-color: rgba(247, 173, 255, 0.7);
 +
margin-top: 240px;
 +
}
 +
.mainBlock .block:nth-child(1):hover {
 +
background-color: rgba(173, 222, 255, 0.85);
 +
border-width: 6px;
 +
}
 +
.mainBlock .block:nth-child(2):hover {
 +
background-color: rgba(255, 206, 173, 0.85);
 +
border-width: 6px;
 +
}
 +
.mainBlock .block:nth-child(3):hover {
 +
background-color: rgba(181, 255, 173, 0.85);
 +
border-width: 6px;
 +
}
 +
.mainBlock .block:nth-child(4):hover {
 +
background-color: rgba(247, 173, 255, 0.85);
 +
border-width: 6px;
 +
}
 +
 +
.block:hover {
 +
cursor: pointer;
 +
}
 +
 +
/* Projects */
 +
 +
.subBlock:nth-child(2) {
 +
position: absolute;
 +
left: -800px;
 +
top: -1200px;
 +
}
 +
 +
.subBlock:nth-child(2) .block:nth-child(2) {
 +
border-color: rgba(14, 92,193, 1);
 +
background-color: rgba(14, 92,193, 0.7);
 +
}
 +
 +
.subBlock:nth-child(2) .block:nth-child(3) {
 +
border-color: rgba(84,137,205, 1);
 +
margin-left: 240px;
 +
background-color: rgba(84,137,205, 0.7);
 +
}
 +
.subBlock:nth-child(2) .block:nth-child(4) {
 +
border-color: rgba(48,113,196, 1);
 +
margin-top: 240px;
 +
background-color: rgba(48,113,196, 0.7);
 +
}
 +
.subBlock:nth-child(2) .block:nth-child(5) {
 +
border-color: rgba(9, 69,146, 1);
 +
background-color: rgba(9, 69,146, 0.7);
 +
margin-top: 240px;
 +
margin-left: 240px;
 +
}
 +
 +
.subBlock:nth-child(2) .block:nth-child(2):hover {
 +
background-color: rgba(14, 92,193, 0.85);
 +
border-width: 6px;
 +
}
 +
.subBlock:nth-child(2) .block:nth-child(3):hover {
 +
background-color: rgba(84,137,205, 0.85);
 +
border-width: 6px;
 +
}
 +
.subBlock:nth-child(2) .block:nth-child(4):hover {
 +
background-color: rgba(48,113,196, 0.85);
 +
border-width: 6px;
 +
}
 +
.subBlock:nth-child(2) .block:nth-child(5):hover {
 +
background-color: rgba(9, 69,146, 0.85);
 +
border-width: 6px;
 +
}
 +
 +
.subBlock:nth-child(2) .block {
 +
width: 200px;
 +
height: 200px;
 +
border: 2px solid;
 +
font-size: 20pt;
 +
font-weight: bold;
 +
text-align: left;
 +
vertical-align: middle;
 +
position: fixed;
 +
border-radius: 40px;
 +
transition: all 0.2s ease-out;
 +
}
 +
 +
.subBlock:nth-child(2) .block p:nth-child(1) {
 +
vertical-align: middle;
 +
margin-top: 25px;
 +
margin-left: 25px;
 +
margin-right: 10px;
 +
text-transform: uppercase;
 +
 +
}
 +
.subBlock:nth-child(2) .block > p:nth-child(2) {
 +
vertical-align: middle;
 +
margin-top: 10px;
 +
margin-left: 25px;
 +
font-size: 12pt;
 +
font-weight: 300;
 +
max-width: 160px;
 +
color: #F0F0F0;
 +
}
 +
 +
.blockDescription {
 +
color: white;
 +
font-family: 'Raleway', sans-serif;
 +
width: 800px;
 +
}
 +
 +
.blockDescription p:nth-child(1) {
 +
font-size: 36pt;
 +
margin-bottom: 5px;
 +
padding-bottom: 0px;
 +
font-weight: bold;
 +
margin-left: -60px;
 +
}
 +
 +
.blockDescription p:nth-child(2) {
 +
font-size: 20pt;
 +
margin-bottom: 40px;
 +
max-width: 600px;
 +
}
 +
 +
 +
/* Outreach */
 +
 +
.subBlock:nth-child(3) {
 +
position: absolute;
 +
left: 900px;
 +
top: -800px;
 +
}
 +
 +
.subBlock:nth-child(3) .block:nth-child(2) {
 +
border-color: rgba( 220,127,150,1);
 +
background-color: rgba(220,127,150, 0.7);
 +
}
 +
 +
.subBlock:nth-child(3) .block:nth-child(3) {
 +
border-color: rgba(180, 73,100,1);
 +
margin-left: 240px;
 +
background-color: rgba(180, 73,100, 0.7);
 +
}
 +
.subBlock:nth-child(3) .block:nth-child(4) {
 +
border-color: rgba( 112, 12, 37,1);
 +
margin-left: 480px;
 +
background-color: rgba(112, 12, 37, 0.7);
 +
}
 +
 +
.subBlock:nth-child(3) .block:nth-child(2):hover {
 +
background-color: rgba(220,127,150, 0.85);
 +
border-width: 6px;
 +
}
 +
.subBlock:nth-child(3) .block:nth-child(3):hover {
 +
background-color: rgba(180, 73,100, 0.85);
 +
border-width: 6px;
 +
}
 +
.subBlock:nth-child(3) .block:nth-child(4):hover {
 +
background-color: rgba(112, 12, 37, 0.85);
 +
border-width: 6px;
 +
}
 +
 +
.subBlock:nth-child(3) .block {
 +
width: 200px;
 +
height: 200px;
 +
border: 2px solid;
 +
font-size: 20pt;
 +
font-weight: bold;
 +
text-align: left;
 +
vertical-align: middle;
 +
position: fixed;
 +
border-radius: 40px;
 +
transition: all 0.2s ease-out;
 +
}
 +
 +
.subBlock:nth-child(3) .block p:nth-child(1) {
 +
vertical-align: middle;
 +
margin-top: 25px;
 +
margin-left: 20px;
 +
margin-right: 15px;
 +
text-transform: uppercase;
 +
overflow: wrap;
 +
hyphens: auto;
 +
 +
}
 +
.subBlock:nth-child(3) .block > p:nth-child(2) {
 +
vertical-align: middle;
 +
margin-top: 10px;
 +
margin-left: 20px;
 +
font-size: 12pt;
 +
font-weight: 300;
 +
max-width: 160px;
 +
color: #F0F0F0;
 +
}
 +
 +
 +
/* Notebook  */
 +
 +
.subBlock:nth-child(5) {
 +
position: absolute;
 +
left: 1100px;
 +
top: 700px;
 +
}
 +
 +
.subBlock:nth-child(5) .block:nth-child(2) {
 +
border-color: rgba(180,239,174, 1);
 +
background-color: rgba(180,239,174, 0.7);
 +
}
 +
 +
.subBlock:nth-child(5) .block:nth-child(3) {
 +
border-color: rgba(134,224,125, 1);
 +
margin-left: 240px;
 +
background-color: rgba(134,224,125, 0.7);
 +
}
 +
.subBlock:nth-child(5) .block:nth-child(4) {
 +
border-color: rgba(66,183, 54, 1);
 +
margin-left: 480px;
 +
background-color: rgba(66,183, 54, 0.7);
 +
}
 +
 +
.subBlock:nth-child(5) .block:nth-child(2):hover {
 +
background-color: rgba(180,239,174, 0.85);
 +
border-width: 6px;
 +
}
 +
.subBlock:nth-child(5) .block:nth-child(3):hover {
 +
background-color: rgba(134,224,125, 0.85);
 +
border-width: 6px;
 +
}
 +
.subBlock:nth-child(5) .block:nth-child(4):hover {
 +
background-color: rgba(66,183, 54, 0.85);
 +
border-width: 6px;
 +
}
 +
 +
.subBlock:nth-child(5) .block {
 +
width: 200px;
 +
height: 200px;
 +
border: 2px solid;
 +
font-size: 20pt;
 +
font-weight: bold;
 +
text-align: left;
 +
vertical-align: middle;
 +
position: fixed;
 +
border-radius: 40px;
 +
transition: all 0.2s ease-out;
 +
}
 +
 +
.subBlock:nth-child(5) .block p:nth-child(1) {
 +
vertical-align: middle;
 +
margin-top: 25px;
 +
margin-left: 25px;
 +
margin-right: 10px;
 +
text-transform: uppercase;
 +
 +
}
 +
.subBlock:nth-child(5) .block > p:nth-child(2) {
 +
vertical-align: middle;
 +
margin-top: 10px;
 +
margin-left: 25px;
 +
font-size: 12pt;
 +
font-weight: 300;
 +
max-width: 160px;
 +
color: #F0F0F0;
 +
}
 +
 +
/* About Us */
 +
 +
.subBlock:nth-child(4) {
 +
position: absolute;
 +
left: -400px;
 +
top: 800px;
 +
}
 +
 +
.subBlock:nth-child(4) .block:nth-child(2) {
 +
border-color: rgba(158, 99,188, 1);
 +
background-color: rgba(158, 99,188, 0.7);
 +
}
 +
 +
.subBlock:nth-child(4) .block:nth-child(3) {
 +
border-color: rgba(128, 62,162, 1);
 +
margin-left: 240px;
 +
background-color: rgba(128, 62,162, 0.7);
 +
}
 +
.subBlock:nth-child(4) .block:nth-child(4) {
 +
border-color: rgba(88, 18,123, 1);
 +
margin-top: 240px;
 +
background-color: rgba(88, 18,123, 0.7);
 +
}
 +
.subBlock:nth-child(4) .block:nth-child(5) {
 +
border-color: rgba( 66,  5, 97, 1);
 +
background-color: rgba( 66,  5, 97, 0.7);
 +
margin-top: 240px;
 +
margin-left: 240px;
 +
}
 +
 +
.subBlock:nth-child(4) .block:nth-child(2):hover {
 +
background-color: rgba(158, 99,188, 0.85);
 +
border-width: 6px;
 +
}
 +
.subBlock:nth-child(4) .block:nth-child(3):hover {
 +
background-color: rgba(128, 62,162, 0.85);
 +
border-width: 6px;
 +
}
 +
.subBlock:nth-child(4) .block:nth-child(4):hover {
 +
background-color: rgba(88, 18,123, 0.85);
 +
border-width: 6px;
 +
}
 +
.subBlock:nth-child(4) .block:nth-child(5):hover {
 +
background-color: rgba( 66,  5, 97, 0.85);
 +
border-width: 6px;
 +
}
 +
 +
.subBlock:nth-child(4) .block {
 +
width: 200px;
 +
height: 200px;
 +
border: 2px solid;
 +
font-size: 20pt;
 +
font-weight: bold;
 +
text-align: left;
 +
vertical-align: middle;
 +
position: fixed;
 +
border-radius: 40px;
 +
transition: all 0.2s ease-out;
 +
}
 +
 +
.subBlock:nth-child(4) .block p:nth-child(1) {
 +
vertical-align: middle;
 +
margin-top: 25px;
 +
margin-left: 25px;
 +
margin-right: 10px;
 +
text-transform: uppercase;
 +
 +
}
 +
.subBlock:nth-child(4) .block > p:nth-child(2) {
 +
vertical-align: middle;
 +
margin-top: 10px;
 +
margin-left: 25px;
 +
font-size: 12pt;
 +
font-weight: 300;
 +
max-width: 160px;
 +
color: #F0F0F0;
 +
}
 +
 +
 +
.leftArrow:hover {
 +
cursor: pointer;
 +
}
 +
 +
/* Overlay */
 +
 +
.overlay {
 +
position: fixed;
 +
display: none;
 +
height:100vh;
 +
width:100vw;
 +
top:0px;
 +
left:-100vw;
 +
z-index:1000;
 +
background-color: rgba( 0,0,0,0.5);
 +
}
 +
</style>
  
−
<div class="column full_size" >
+
<body>
−
<img src="https://static.igem.org/mediawiki/2017/6/6c/Test_Picutre.jpeg">
+
<div class="overlay">
 +
<iframe>
 +
 +
</iframe>
 
</div>
 
</div>
 +
<div class="pageCanvas">
 +
<div class="h1 animated bounceIn">
 +
<img src="img/logoWide.jpg" />
 +
<p>An Apeeling Solution </br>to Panama Disease</p>
 +
</div>
 +
<div class="blockContainer">
 +
<div class="mainBlock animated bounceIn">
  
 +
<div class="block">
 +
<p>Projects</p>
 +
<p>Saving the Cavendish banana</p>
 +
</div>
  
 +
<div class="block">
 +
<p>Outreach</p>
 +
<p>Increasing access to synthetic biology for high schools</p>
 +
</div>
  
−
<div class="column full_size" >
+
<div class="block">
−
<h1> Summary of the issue  </h1>
+
<p style="margin-top: 30px; line-height: 1.8em;">Parts</br>Modeling</br>Notebook</p>
−
<p>
+
</div>
−
The banana is the most popular fruit in the world, with a whopping 160 million tons produced annually. In America, we think of the banana as a fruit, something we love but could live without. However, the same cannot be said for over 400 million people in poor countries. These individuals rely on bananas as their biggest, and sometimes, sole source of calories and nutrition.
+
−
+
−
Terrifyingly enough, 7% of the world’s population could lose its sole source of food as the banana crop is being ravaged by a devastating pandemic: Panama disease.
+
−
+
−
Panama disease is caused by the fungus Fusarium oxysporum f. sp. Cubense, which is a soil pathogen that infects the root system of the plant and goes on to colonize the plant through its vascular system. The disease causes the banana to rot and die. Once the soil has been infected, spores of the fungus can continue to infect plants grown nearby for decades, making the infected soil unusable. Even worse, the disease cannot be controlled or cured except through soil treatments, such as fumigation, which are so detrimental to the environment that they are prohibited almost everywhere.
+
−
+
−
Thanks to this fungus, the banana and the banana industry have had quite a tumultuous history. A century ago, the most-grown cultivar was the Gros Michel, a reportedly superior-tasting banana crop that was exploited for its high productivity. This was the only cultivar grown on large-scale and most small-scale banana plantations, making the banana industry reliant on a single Gros Michel monoculture.
+
−
+
−
Plantation owners soon found themselves in the same trouble that Irish potato farmers did in the mid-1800s. Monocultures do not have any genetic diversity, making them extremely susceptible to pathogens because without genetic diversity, the species is unable to adapt itself to fight off pathogens.
+
−
+
−
In the mid-1900s, a pathogen took advantage of this fact. The Fusarium fungus struck, devastating the entire banana industry and driving the Gros Michel to near extinction. Banana farmers were left reeling with the tremendous loss of their banana crop.
+
−
+
−
A new solution had to be found quickly and the Cavendish cultivar was soon pushed forward for its similar taste to the Gros Michel, high productivity, and immunity to the fungus. Soon enough, the Cavendish cultivar replaced the Gros Michel and once again became a monoculture.
+
−
+
−
Presently, history is repeating itself. The Fusarium fungus has evolved into a new strain that is devastating the Cavendish cultivar. Billions of dollars and thousands of hectares of plantation space are lost every year as a result of fungal infection.
+
−
 
+
−
Fusarium oxysporum f. Sp. cubense race 4 is the most deadly to the Cavendish banana. This fungus is able to first infect the roots of the plant, secreting different hydrolytic enzymes, and subsequently infect the xylem, blocking water and nutrient flow, leading to the death of the plant (Dong, Chunyu Li). Symptoms, however, are typically not visible until four months after infection, providing ample time for the fungus to spread without notice. Additionally, the fungus remains in the soil in the form of spores, ready to infect the next set of plants.
+
−
 
+
−
Therefore, there is a need to develop a method of protecting the Cavendish banana from Fusarium oxysporum and eliminating the fungus from the soil.
+
−
<h1>Approach</h1>
+
−
<p>
+
−
Many eukaryotes produce a class of proteins known as thaumatin-like proteins (TLPs) in response to attack and stress. Some of these TLPs are known to have antifungal properties against F. oxysporum. Among these are the TLP from Oryza sativa (rice) and Arachis diogoi (wild peanut plant).
+
−
 
+
−
As previously stated, current methods of fungal inhibition are too detrimental and cannot be used for extended periods of time. However, recent studies have shown that biocontrol methods using disease-suppressive soils have been quite effective at fungal inhibition. Bacillus amyloliquefaciens (BA) NJN-6 is a common Bacillus strain found in the Cavendish banana rhizosphere. BA has been found to produce some antifungal compounds that are fairly effective at suppressing fungal growth. By combining BA with compost to make a fertilizer and applying it to soil already infected by F. oxysporum, the susceptibility of the banana plants to the fungus was greatly reduced. While quite effective, the bacteria alone is unable to kill the fungus.
+
−
 
+
−
As a result, we propose to transform BA to produce an antifungal TLP. Then we will again combine this with compost to create a fertilizer that is even more potent. Since TLPs are known to actually be able to kill the fungus in addition to being able to inhibit spore germination, this transformed BA has the potential to be more effective against F. oxysporum.  </p>
+
−
</div>  
+
  
 +
<div class="block">
 +
<p>About Us</p>
 +
<p>Learn more about UMaryland iGEM</p>
 +
</div>
 +
</div>
 +
<div class="subBlock">
 +
<div class="blockDescription">
 +
<p><span class="leftArrow">&larr;</span> Projects</p>
 +
<p>From saving the Cavendish to expanding synthetic biology</p>
 +
</div>
 +
<div class="block">
 +
<p>An Appeling Solution</p>
 +
<p>to save the Cavendish</p>
 +
</div>
 +
<div class="block">
 +
<p>Cas9 Mutant Screening</p>
 +
<p>Screening for mutants using CRISPR/Cas9</p>
 +
</div>
 +
<div class="block">
 +
<p>Lab-in-a-box</p>
 +
<p>Low cost DIY lab equipment</p>
 +
</div>
 +
<div class="block">
 +
<p>Metal Detection</p>
 +
<p>Teaching synthetic biology using real world examples</p>
 +
</div>
 +
</div>
 +
 +
<div class="subBlock">
 +
<div class="blockDescription">
 +
<p><span class="leftArrow">&larr;</span> Outreach</p>
 +
<p>Reaching out to the community about synthetic biology</p>
 +
</div>
 +
<div class="block">
 +
<p>Knowing Panama Disease</p>
 +
<p>Feedback, concerns, and feasiblity</p>
 +
</div>
 +
<div class="block">
 +
<p>Teaching the Next Generation</p>
 +
<p>of synthetic biologists</p>
 +
</div>
 +
<div class="block">
 +
<p>Talking with the Community</p>
 +
<p>about bananas, GMOs, and synthetic biology</p>
 +
</div>
 +
</div>
  
 +
<div class="subBlock">
 +
<div class="blockDescription">
 +
<p><span class="leftArrow">&larr;</span> About Us</p>
 +
<p>UMaryland iGEM - Since 2014</p>
 +
</div>
 +
<div class="block">
 +
<p>Students</p>
 +
<p>The next generation of scientists</p>
 +
</div>
 +
<div class="block">
 +
<p>Advisors</p>
 +
<p>Guiding our efforts</p>
 +
</div>
 +
<div class="block">
 +
<p>Funding</p>
 +
<p>Providing support for the team</p>
 +
</div>
 +
<div class="block">
 +
<p>Acknowl-</br>edgements</p>
 +
<p>Those who helped us get here</p>
 +
</div>
 +
</div>
 +
 +
<div class="subBlock">
 +
<div class="blockDescription">
 +
<p><span class="leftArrow">&larr;</span> Application</p>
 +
<p>Contributing to the scientific community</p>
 +
</div>
 +
<div class="block">
 +
<p>Parts</p>
 +
<p>Contributions to the Registry</p>
 +
</div>
 +
<div class="block">
 +
<p>Modeling</p>
 +
<p>Applying engineering principles</p>
 +
</div>
 +
<div class="block">
 +
<p>Notebook</p>
 +
<p>Follow our progress throughout our experience</p>
 +
</div>
 +
</div>
  
 +
</div>
 +
</div>
 +
</body>
  
 +
<style>
 +
@charset "UTF-8";
  
 +
/*!
 +
* animate.css -http://daneden.me/animate
 +
* Version - 3.5.2
 +
* Licensed under the MIT license - http://opensource.org/licenses/MIT
 +
*
 +
* Copyright (c) 2017 Daniel Eden
 +
*/
  
 +
.animated{animation-duration:1s;animation-fill-mode:both}.animated.infinite{animation-iteration-count:infinite}.animated.hinge{animation-duration:2s}.animated.bounceIn,.animated.bounceOut,.animated.flipOutX,.animated.flipOutY{animation-duration:.75s}@keyframes bounce{0%,20%,53%,80%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1);transform:translateZ(0)}40%,43%{animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-30px,0)}70%{animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-15px,0)}90%{transform:translate3d(0,-4px,0)}}.bounce{animation-name:bounce;transform-origin:center bottom}@keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}.flash{animation-name:flash}@keyframes pulse{0%{transform:scaleX(1)}50%{transform:scale3d(1.05,1.05,1.05)}to{transform:scaleX(1)}}.pulse{animation-name:pulse}@keyframes rubberBand{0%{transform:scaleX(1)}30%{transform:scale3d(1.25,.75,1)}40%{transform:scale3d(.75,1.25,1)}50%{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}to{transform:scaleX(1)}}.rubberBand{animation-name:rubberBand}@keyframes shake{0%,to{transform:translateZ(0)}10%,30%,50%,70%,90%{transform:translate3d(-10px,0,0)}20%,40%,60%,80%{transform:translate3d(10px,0,0)}}.shake{animation-name:shake}@keyframes headShake{0%{transform:translateX(0)}6.5%{transform:translateX(-6px) rotateY(-9deg)}18.5%{transform:translateX(5px) rotateY(7deg)}31.5%{transform:translateX(-3px) rotateY(-5deg)}43.5%{transform:translateX(2px) rotateY(3deg)}50%{transform:translateX(0)}}.headShake{animation-timing-function:ease-in-out;animation-name:headShake}@keyframes swing{20%{transform:rotate(15deg)}40%{transform:rotate(-10deg)}60%{transform:rotate(5deg)}80%{transform:rotate(-5deg)}to{transform:rotate(0deg)}}.swing{transform-origin:top center;animation-name:swing}@keyframes tada{0%{transform:scaleX(1)}10%,20%{transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{transform:scaleX(1)}}.tada{animation-name:tada}@keyframes wobble{0%{transform:none}15%{transform:translate3d(-25%,0,0) rotate(-5deg)}30%{transform:translate3d(20%,0,0) rotate(3deg)}45%{transform:translate3d(-15%,0,0) rotate(-3deg)}60%{transform:translate3d(10%,0,0) rotate(2deg)}75%{transform:translate3d(-5%,0,0) rotate(-1deg)}to{transform:none}}.wobble{animation-name:wobble}@keyframes jello{0%,11.1%,to{transform:none}22.2%{transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{transform:skewX(6.25deg) skewY(6.25deg)}44.4%{transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{transform:skewX(.390625deg) skewY(.390625deg)}88.8%{transform:skewX(-.1953125deg) skewY(-.1953125deg)}}.jello{animation-name:jello;transform-origin:center}@keyframes bounceIn{0%,20%,40%,60%,80%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:scale3d(.3,.3,.3)}20%{transform:scale3d(1.1,1.1,1.1)}40%{transform:scale3d(.9,.9,.9)}60%{opacity:1;transform:scale3d(1.03,1.03,1.03)}80%{transform:scale3d(.97,.97,.97)}to{opacity:1;transform:scaleX(1)}}.bounceIn{animation-name:bounceIn}@keyframes bounceInDown{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(0,-3000px,0)}60%{opacity:1;transform:translate3d(0,25px,0)}75%{transform:translate3d(0,-10px,0)}90%{transform:translate3d(0,5px,0)}to{transform:none}}.bounceInDown{animation-name:bounceInDown}@keyframes bounceInLeft{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(-3000px,0,0)}60%{opacity:1;transform:translate3d(25px,0,0)}75%{transform:translate3d(-10px,0,0)}90%{transform:translate3d(5px,0,0)}to{transform:none}}.bounceInLeft{animation-name:bounceInLeft}@keyframes bounceInRight{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(3000px,0,0)}60%{opacity:1;transform:translate3d(-25px,0,0)}75%{transform:translate3d(10px,0,0)}90%{transform:translate3d(-5px,0,0)}to{transform:none}}.bounceInRight{animation-name:bounceInRight}@keyframes bounceInUp{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(0,3000px,0)}60%{opacity:1;transform:translate3d(0,-20px,0)}75%{transform:translate3d(0,10px,0)}90%{transform:translate3d(0,-5px,0)}to{transform:translateZ(0)}}.bounceInUp{animation-name:bounceInUp}@keyframes bounceOut{20%{transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;transform:scale3d(1.1,1.1,1.1)}to{opacity:0;transform:scale3d(.3,.3,.3)}}.bounceOut{animation-name:bounceOut}@keyframes bounceOutDown{20%{transform:translate3d(0,10px,0)}40%,45%{opacity:1;transform:translate3d(0,-20px,0)}to{opacity:0;transform:translate3d(0,2000px,0)}}.bounceOutDown{animation-name:bounceOutDown}@keyframes bounceOutLeft{20%{opacity:1;transform:translate3d(20px,0,0)}to{opacity:0;transform:translate3d(-2000px,0,0)}}.bounceOutLeft{animation-name:bounceOutLeft}@keyframes bounceOutRight{20%{opacity:1;transform:translate3d(-20px,0,0)}to{opacity:0;transform:translate3d(2000px,0,0)}}.bounceOutRight{animation-name:bounceOutRight}@keyframes bounceOutUp{20%{transform:translate3d(0,-10px,0)}40%,45%{opacity:1;transform:translate3d(0,20px,0)}to{opacity:0;transform:translate3d(0,-2000px,0)}}.bounceOutUp{animation-name:bounceOutUp}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fadeIn{animation-name:fadeIn}@keyframes fadeInDown{0%{opacity:0;transform:translate3d(0,-100%,0)}to{opacity:1;transform:none}}.fadeInDown{animation-name:fadeInDown}@keyframes fadeInDownBig{0%{opacity:0;transform:translate3d(0,-2000px,0)}to{opacity:1;transform:none}}.fadeInDownBig{animation-name:fadeInDownBig}@keyframes fadeInLeft{0%{opacity:0;transform:translate3d(-100%,0,0)}to{opacity:1;transform:none}}.fadeInLeft{animation-name:fadeInLeft}@keyframes fadeInLeftBig{0%{opacity:0;transform:translate3d(-2000px,0,0)}to{opacity:1;transform:none}}.fadeInLeftBig{animation-name:fadeInLeftBig}@keyframes fadeInRight{0%{opacity:0;transform:translate3d(100%,0,0)}to{opacity:1;transform:none}}.fadeInRight{animation-name:fadeInRight}@keyframes fadeInRightBig{0%{opacity:0;transform:translate3d(2000px,0,0)}to{opacity:1;transform:none}}.fadeInRightBig{animation-name:fadeInRightBig}@keyframes fadeInUp{0%{opacity:0;transform:translate3d(0,100%,0)}to{opacity:1;transform:none}}.fadeInUp{animation-name:fadeInUp}@keyframes fadeInUpBig{0%{opacity:0;transform:translate3d(0,2000px,0)}to{opacity:1;transform:none}}.fadeInUpBig{animation-name:fadeInUpBig}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.fadeOut{animation-name:fadeOut}@keyframes fadeOutDown{0%{opacity:1}to{opacity:0;transform:translate3d(0,100%,0)}}.fadeOutDown{animation-name:fadeOutDown}@keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;transform:translate3d(0,2000px,0)}}.fadeOutDownBig{animation-name:fadeOutDownBig}@keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;transform:translate3d(-100%,0,0)}}.fadeOutLeft{animation-name:fadeOutLeft}@keyframes fadeOutLeftBig{0%{opacity:1}to{opacity:0;transform:translate3d(-2000px,0,0)}}.fadeOutLeftBig{animation-name:fadeOutLeftBig}@keyframes fadeOutRight{0%{opacity:1}to{opacity:0;transform:translate3d(100%,0,0)}}.fadeOutRight{animation-name:fadeOutRight}@keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;transform:translate3d(2000px,0,0)}}.fadeOutRightBig{animation-name:fadeOutRightBig}@keyframes fadeOutUp{0%{opacity:1}to{opacity:0;transform:translate3d(0,-100%,0)}}.fadeOutUp{animation-name:fadeOutUp}@keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;transform:translate3d(0,-2000px,0)}}.fadeOutUpBig{animation-name:fadeOutUpBig}@keyframes flip{0%{transform:perspective(400px) rotateY(-1turn);animation-timing-function:ease-out}40%{transform:perspective(400px) translateZ(150px) rotateY(-190deg);animation-timing-function:ease-out}50%{transform:perspective(400px) translateZ(150px) rotateY(-170deg);animation-timing-function:ease-in}80%{transform:perspective(400px) scale3d(.95,.95,.95);animation-timing-function:ease-in}to{transform:perspective(400px);animation-timing-function:ease-in}}.animated.flip{-webkit-backface-visibility:visible;backface-visibility:visible;animation-name:flip}@keyframes flipInX{0%{transform:perspective(400px) rotateX(90deg);animation-timing-function:ease-in;opacity:0}40%{transform:perspective(400px) rotateX(-20deg);animation-timing-function:ease-in}60%{transform:perspective(400px) rotateX(10deg);opacity:1}80%{transform:perspective(400px) rotateX(-5deg)}to{transform:perspective(400px)}}.flipInX{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;animation-name:flipInX}@keyframes flipInY{0%{transform:perspective(400px) rotateY(90deg);animation-timing-function:ease-in;opacity:0}40%{transform:perspective(400px) rotateY(-20deg);animation-timing-function:ease-in}60%{transform:perspective(400px) rotateY(10deg);opacity:1}80%{transform:perspective(400px) rotateY(-5deg)}to{transform:perspective(400px)}}.flipInY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;animation-name:flipInY}@keyframes flipOutX{0%{transform:perspective(400px)}30%{transform:perspective(400px) rotateX(-20deg);opacity:1}to{transform:perspective(400px) rotateX(90deg);opacity:0}}.flipOutX{animation-name:flipOutX;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@keyframes flipOutY{0%{transform:perspective(400px)}30%{transform:perspective(400px) rotateY(-15deg);opacity:1}to{transform:perspective(400px) rotateY(90deg);opacity:0}}.flipOutY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;animation-name:flipOutY}@keyframes lightSpeedIn{0%{transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{transform:skewX(20deg);opacity:1}80%{transform:skewX(-5deg);opacity:1}to{transform:none;opacity:1}}.lightSpeedIn{animation-name:lightSpeedIn;animation-timing-function:ease-out}@keyframes lightSpeedOut{0%{opacity:1}to{transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}.lightSpeedOut{animation-name:lightSpeedOut;animation-timing-function:ease-in}@keyframes rotateIn{0%{transform-origin:center;transform:rotate(-200deg);opacity:0}to{transform-origin:center;transform:none;opacity:1}}.rotateIn{animation-name:rotateIn}@keyframes rotateInDownLeft{0%{transform-origin:left bottom;transform:rotate(-45deg);opacity:0}to{transform-origin:left bottom;transform:none;opacity:1}}.rotateInDownLeft{animation-name:rotateInDownLeft}@keyframes rotateInDownRight{0%{transform-origin:right bottom;transform:rotate(45deg);opacity:0}to{transform-origin:right bottom;transform:none;opacity:1}}.rotateInDownRight{animation-name:rotateInDownRight}@keyframes rotateInUpLeft{0%{transform-origin:left bottom;transform:rotate(45deg);opacity:0}to{transform-origin:left bottom;transform:none;opacity:1}}.rotateInUpLeft{animation-name:rotateInUpLeft}@keyframes rotateInUpRight{0%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0}to{transform-origin:right bottom;transform:none;opacity:1}}.rotateInUpRight{animation-name:rotateInUpRight}@keyframes rotateOut{0%{transform-origin:center;opacity:1}to{transform-origin:center;transform:rotate(200deg);opacity:0}}.rotateOut{animation-name:rotateOut}@keyframes rotateOutDownLeft{0%{transform-origin:left bottom;opacity:1}to{transform-origin:left bottom;transform:rotate(45deg);opacity:0}}.rotateOutDownLeft{animation-name:rotateOutDownLeft}@keyframes rotateOutDownRight{0%{transform-origin:right bottom;opacity:1}to{transform-origin:right bottom;transform:rotate(-45deg);opacity:0}}.rotateOutDownRight{animation-name:rotateOutDownRight}@keyframes rotateOutUpLeft{0%{transform-origin:left bottom;opacity:1}to{transform-origin:left bottom;transform:rotate(-45deg);opacity:0}}.rotateOutUpLeft{animation-name:rotateOutUpLeft}@keyframes rotateOutUpRight{0%{transform-origin:right bottom;opacity:1}to{transform-origin:right bottom;transform:rotate(90deg);opacity:0}}.rotateOutUpRight{animation-name:rotateOutUpRight}@keyframes hinge{0%{transform-origin:top left;animation-timing-function:ease-in-out}20%,60%{transform:rotate(80deg);transform-origin:top left;animation-timing-function:ease-in-out}40%,80%{transform:rotate(60deg);transform-origin:top left;animation-timing-function:ease-in-out;opacity:1}to{transform:translate3d(0,700px,0);opacity:0}}.hinge{animation-name:hinge}@keyframes jackInTheBox{0%{opacity:0;transform:scale(.1) rotate(30deg);transform-origin:center bottom}50%{transform:rotate(-10deg)}70%{transform:rotate(3deg)}to{opacity:1;transform:scale(1)}}.jackInTheBox{animation-name:jackInTheBox}@keyframes rollIn{0%{opacity:0;transform:translate3d(-100%,0,0) rotate(-120deg)}to{opacity:1;transform:none}}.rollIn{animation-name:rollIn}@keyframes rollOut{0%{opacity:1}to{opacity:0;transform:translate3d(100%,0,0) rotate(120deg)}}.rollOut{animation-name:rollOut}@keyframes zoomIn{0%{opacity:0;transform:scale3d(.3,.3,.3)}50%{opacity:1}}.zoomIn{animation-name:zoomIn}@keyframes zoomInDown{0%{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,60px,0);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInDown{animation-name:zoomInDown}@keyframes zoomInLeft{0%{opacity:0;transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(10px,0,0);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInLeft{animation-name:zoomInLeft}@keyframes zoomInRight{0%{opacity:0;transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInRight{animation-name:zoomInRight}@keyframes zoomInUp{0%{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInUp{animation-name:zoomInUp}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;transform:scale3d(.3,.3,.3)}to{opacity:0}}.zoomOut{animation-name:zoomOut}@keyframes zoomOutDown{40%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform-origin:center bottom;animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomOutDown{animation-name:zoomOutDown}@keyframes zoomOutLeft{40%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;transform:scale(.1) translate3d(-2000px,0,0);transform-origin:left center}}.zoomOutLeft{animation-name:zoomOutLeft}@keyframes zoomOutRight{40%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;transform:scale(.1) translate3d(2000px,0,0);transform-origin:right center}}.zoomOutRight{animation-name:zoomOutRight}@keyframes zoomOutUp{40%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,60px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform-origin:center bottom;animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomOutUp{animation-name:zoomOutUp}@keyframes slideInDown{0%{transform:translate3d(0,-100%,0);visibility:visible}to{transform:translateZ(0)}}.slideInDown{animation-name:slideInDown}@keyframes slideInLeft{0%{transform:translate3d(-100%,0,0);visibility:visible}to{transform:translateZ(0)}}.slideInLeft{animation-name:slideInLeft}@keyframes slideInRight{0%{transform:translate3d(100%,0,0);visibility:visible}to{transform:translateZ(0)}}.slideInRight{animation-name:slideInRight}@keyframes slideInUp{0%{transform:translate3d(0,100%,0);visibility:visible}to{transform:translateZ(0)}}.slideInUp{animation-name:slideInUp}@keyframes slideOutDown{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(0,100%,0)}}.slideOutDown{animation-name:slideOutDown}@keyframes slideOutLeft{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(-100%,0,0)}}.slideOutLeft{animation-name:slideOutLeft}@keyframes slideOutRight{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(100%,0,0)}}.slideOutRight{animation-name:slideOutRight}@keyframes slideOutUp{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(0,-100%,0)}}.slideOutUp{animation-name:slideOutUp}
 +
</style>
  
 +
<script type="text/javascript" src="js/panzoom.js"></script>
 +
<script type="text/javascript">
  
 +
$(document).ready(function() {
 +
    $('.pageCanvas').panzoom({
 +
cursor: "-webkit-grab"
 +
});
 +
 +
$('.mainBlock .block:nth-child(1)').click( function() {
 +
$('.pageCanvas').css('transition', '.7s ease-in-out');
 +
$('.pageCanvas').css('transform', 'matrix(1,0,0,1,447,1045)');
 +
})
 +
 +
$('.mainBlock .block:nth-child(2)').click( function() {
 +
$('.pageCanvas').css('transition', '.7s ease-in-out');
 +
$('.pageCanvas').css('transform', 'matrix(1,0,0,1,-1277,754)');
 +
})
 +
 +
$('.mainBlock .block:nth-child(3)').click( function() {
 +
$('.pageCanvas').css('transition', '.7s ease-in-out');
 +
$('.pageCanvas').css('transform', 'matrix(1,0,0,1,-1522,-743)');
 +
})
 +
 +
$('.mainBlock .block:nth-child(4)').click( function() {
 +
$('.pageCanvas').css('transition', '.7s ease-in-out');
 +
$('.pageCanvas').css('transform', 'matrix(1,0,0,1,51,-935)');
 +
})
 +
 +
$('.leftArrow').click( function() {
 +
$('.pageCanvas').css('transition', '.7s ease-in-out');
 +
$('.pageCanvas').css('transform', 'matrix(1,0,0,1,0,1)');
 +
})
 +
 +
  });
 +
 
 +
 
 +
  $('.subBlock .block').click( function() {
 +
$('.pageCanvas').css('opacity', '0.2');
 +
$('.overlay').css('display', 'block');;
 +
 +
$('.overlay').css('transition', 'ease-in-out, 2s');
 +
$('.overlay').animate({
 +
left: '0vw'
 +
})
 +
  });
 +
 
 +
 
 +
</script>
 
</html>
 
</html>

Revision as of 15:51, 21 October 2017

An Apeeling Solution
to Panama Disease

Projects

Saving the Cavendish banana

Outreach

Increasing access to synthetic biology for high schools

Parts
Modeling
Notebook

About Us

Learn more about UMaryland iGEM

← Projects

From saving the Cavendish to expanding synthetic biology

An Appeling Solution

to save the Cavendish

Cas9 Mutant Screening

Screening for mutants using CRISPR/Cas9

Lab-in-a-box

Low cost DIY lab equipment

Metal Detection

Teaching synthetic biology using real world examples

← Outreach

Reaching out to the community about synthetic biology

Knowing Panama Disease

Feedback, concerns, and feasiblity

Teaching the Next Generation

of synthetic biologists

Talking with the Community

about bananas, GMOs, and synthetic biology

← About Us

UMaryland iGEM - Since 2014

Students

The next generation of scientists

Advisors

Guiding our efforts

Funding

Providing support for the team

Acknowl-
edgements

Those who helped us get here

← Application

Contributing to the scientific community

Parts

Contributions to the Registry

Modeling

Applying engineering principles

Notebook

Follow our progress throughout our experience