Difference between revisions of "Team:Bulgaria"

Line 1: Line 1:
−
{{Bulgaria}}
 
 
<html>
 
<html>
 +
<head>
 +
<meta name="viewport" content="width=device-width, initial-scale=1">
 +
<link href="https://fonts.googleapis.com/css?family=Raleway:700" rel="stylesheet">
 +
<link href="https://fonts.googleapis.com/css?family=Montserrat:300|Vollkorn:700|Wallpoet|Heebo:800|Alegreya+Sans+SC:900" rel="stylesheet">
 +
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 +
</head>
 +
<style>
  
 +
* {
 +
  -webkit-box-sizing: border-box;
 +
          box-sizing: border-box;
 +
  margin: 0;
 +
  padding: 0;
 +
}
 +
html {
 +
  font-size:16px;
 +
}
 +
body {
 +
  width: 100%;
 +
  margin: 48px 0 0 0;
 +
  padding: 0;
 +
  color: black;
 +
  background-color: white;
 +
  font: inherit;
 +
  font-size:16px;
 +
  word-wrap: break-word;
 +
}
  
 +
@media (min-width: 1024px) {
 +
  body {
 +
    margin: 16px 0 0 0;
 +
  }
 +
}
  
  
−
<div class="column full_size" >
+
#globalWrapper {
−
<h1> Welcome to iGEM Bulgaria 2018! </h1>
+
  width: 100%;
 +
  padding: 0;
 +
  background-color: #149375;
 +
  position: relative;
 +
  font-size: 16px;
 +
}
 +
#content {
 +
  width: 100%;
 +
  min-height: 80vh;
 +
  margin: 0;
 +
  padding: 0;
 +
  border: none;
 +
  color: inherit;
 +
  background-color: #ffffff;
 +
  position: relative;
 +
}
 +
#HQ_page {
 +
  width: 100%;
 +
  margin: 0;
 +
  padding: 0;
 +
  background: none;
 +
}
 +
#top_title{display:none;}
  
  
−
</div>
+
#bodyContent {
 +
}
  
−
<h2> Project desription </h2>
+
html *{
 +
cursor:url("https://static.igem.org/mediawiki/2018/4/48/T--Bulgaria--idea.png"),auto;
 +
}
  
−
<p align="justify">We aim to create an in vitro DNA detection system that could be used for different molecular diagnostics purposes. A novel tool of this type will have the potential to simplify the detection of viral and microbial pathogens.Moreover, it will facilitate a fast and cheap identification of disease causing genetic variants in our genomes without the need of sequencing. Our DNA detection system relies on a pair of dCas9 proteins, linked to split halves of horseradish peroxidase (sHRP).If the target sequence is present, the enzyme is restored and its activity can be detected with a simple colorimetric reaction. This system has the full potential to be flexible, cheap and time-efficient, with no requirements for specialized and complex equipment.
+
h1{
−
To ensure the correct identification of specific pathogens, we will concentrate on a specific DNA sequence, like CDS for unique viral proteins (viruses), or regions in the 16s rRNA locus (bacterial pathogens).Our system can also be used for the identification of diseases causing single nucleotide variants in the human genome. Having in mind the small differences between the two sequences, we will have to concentrate on variants located in the PAM region or affecting some of the bases in close proximity. This scenario will guarantee that the wild type sequence will not activate our sensor. Another group of potentially interesting targets consists of variants in genes with a well-known role in drug metabolism and transport. At the present time, a large number of medicaments requires molecular genotyping before initial use in order to adjust the right dose and/or to prevent serious (potentially lethal) side effects.
+
padding-top: 30px;
−
To increase the number of potentially detectable mutations, we will include in our system not only the wild type dCAs9, but also evolved variants with different PAM preferences, as well as Cas9 analogs from different species.</p>
+
font-size: 40px;
 +
font-family: 'Alegreya Sans SC', sans-serif !important;
 +
padding-bottom: 10px;
 +
}
  
−
<p align="justify">
+
#bottomLayer{
−
Selected diagnostic targets: Cystic fibrosis (mutation F508del that affects approximately 70% of the patients worldwide), Borrelia (genus of bacteria that causes  borreliosis, disease transmitted primarily by ticks), Human immunodeficiency virus (HIV, causes acquired immunodeficiency syndrome) and HLA-B*5701 (genetic variant HLA-B that is associated with an extreme sensitivity to the drug abacavir).</p>
+
position: fixed;
 +
top:15px;
 +
left:0px;
 +
height: 110%;
 +
width: 100%;
 +
background-color: #0A1215;
  
 +
}
  
 +
.backgroundPicture{
 +
position: fixed;
 +
top: 15;
 +
left: 0;
 +
width: 100%;
 +
height: 100%;
 +
opacity: 0.5;
 +
background-image: url("https://static.igem.org/mediawiki/2018/5/55/T--Bulgaria--Team.jpg");
 +
background-color: #0A1215;
 +
background-position: center;
 +
background-repeat: no-repeat;
 +
background-size: cover;
 +
}
  
−
<p align="justify">Our project has enormous potential to influence many fields in our country. Cystic fibrosis is the most common rare disease in Bulgaria. In large number of the cases, the patient is initially misdiagnosed at clinics when sweat chloride level is used as indicator. Having a cheap and reliable genetic test will allow easy detection of the disease and adequate treatment at an earlier time point. Moreover, our system can be applied in all local hospitals in many small townssince it does not require expensive and sophisticated equipment, for instance - DNA sequencing devices.</p>
 
  
−
<p align="justify">A novel, simple tool for nucleic acid detection will also have a grand impact on the detection of different bacterial and viral pathogens. Our country, Bulgaria, is at the border of the European Union. In this region, significant climate changes and large groups of migrating people from Asia and Africa are considered to be typical events. This creates the perfect environment for various pathogens that are not well known by the local health authorities. Having a simple and fast system for their detection and identification available on the field, will prove very helpful to the local health personnel, especially in remote regions.  
+
.navigation {
−
Last but not least, our system will allow an easy, quick and cheap detection of variants in genes playing a role in the metabolism of different drugs. Such knowledge will improve the empirical dose adjustment processes, leading to the reduction of potential side-effects and an overall better therapeutic outcome.</p>
+
  position:fixed;
 +
  top:15px;
 +
  width: 100%;
 +
  left:0px;
 +
  overflow: hidden;
 +
  background-color: #62071B;
 +
}
  
 +
.navigation a {
 +
  font-family: 'Raleway', sans-serif;
 +
  float: left;
 +
  display: block;
 +
  color: White;
 +
  text-align: center;
 +
  padding: 14px 16px;
 +
  text-decoration: none;
 +
  font-size: 17px;
 +
}
  
 +
.navigation a:hover {
 +
  background-color: #380615;
 +
  color: White;
 +
}
  
 +
#specialMenu {
 +
  background-color: #D5898A;
 +
  color: white;
 +
}
  
 +
#activeMenu{
 +
  background-color: #9F182F;
 +
  color: white;
 +
}
 +
 +
.navigation .icon {
 +
  display: none;
 +
}
 +
 +
@media screen and (max-width: 1000px) {
 +
  .navigation a:not(:first-child) {display: none;}
 +
  .navigation a.icon {
 +
    float: right;
 +
    display: block;
 +
  }
 +
}
 +
 +
@media screen and (max-width: 1000px) {
 +
  .navigation.responsive {  position:fixed;
 +
  top:15px;
 +
  width: 100%;
 +
  left:0px;}
 +
  .navigation.responsive .icon {
 +
    position: absolute;
 +
    right: 0;
 +
    top: 0;
 +
  }
 +
  .navigation.responsive a {
 +
    float: none;
 +
    display: block;
 +
    text-align: left;
 +
  }
 +
}
 +
 +
 +
.contentHolder{
 +
-webkit-touch-callout: none;
 +
    -webkit-user-select: none;
 +
    -khtml-user-select: none;
 +
    -moz-user-select: none;
 +
    -ms-user-select: none;
 +
    user-select: none;
 +
opacity: 0.8;
 +
position: relative;
 +
top:70vh;
 +
margin-left: auto;
 +
margin-right: auto;
 +
width: 850px;
 +
padding-bottom: 70px;
 +
padding-top: 20px;
 +
background-color: #b5b7b8;
 +
height: auto;
 +
text-align: center !important;
 +
}
 +
 +
a{
 +
color: black;
 +
 +
}
 +
a:hover{
 +
color: black;
 +
text-decoration: none;
 +
 +
}
 +
 +
.contentHolder:hover{
 +
background-color: C5C7C8;
 +
 +
}
 +
 +
#topTitle{
 +
padding-top: 50px;
 +
border-radius: 50px 50px 0px 0px;
 +
opacity: 1;
 +
text-align: center;
 +
font-family: 'Heebo', sans-serif;
 +
font-size: 60px;
 +
height: 30px;
 +
}
 +
#topTitle:hover{
 +
background-color: B5B7B8;
 +
}
 +
 +
 +
 +
p{
 +
text-align: center !important;
 +
margin-left: 64px;
 +
margin-right: 64px;
 +
font-family: 'Montserrat', sans-serif !important;
 +
font-size: 20px !important;
 +
}
 +
 +
strong{
 +
font-family: 'Heebo', sans-serif;
 +
}
 +
 +
.dropbtn {
 +
display: none;
 +
    background-color: #4CAF50;
 +
    color: white;
 +
    padding: 16px;
 +
    font-size: 16px;
 +
    border: none;
 +
    cursor: pointer;
 +
width: 20vw;
 +
}
 +
 +
 +
 +
.quickfind-content {
 +
font-family: 'Heebo', sans-serif;
 +
    display: none;
 +
    position: absolute;
 +
    background-color: #f9f9f9;
 +
    width: 20vw;
 +
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 +
    z-index: 1;
 +
 +
}
 +
 +
.quickfind-content a {
 +
    color: black;
 +
    padding: 12px 16px;
 +
    text-decoration: none;
 +
    display: block;
 +
text-align: center;
 +
border-style: solid none none none;
 +
}
 +
 +
.quickfind-content a:hover {background-color: #B1B1B1}
 +
 +
.quickfind:hover .quickfind-content {
 +
    display: block;
 +
}
 +
 +
.quickfind:hover .dropbtn {
 +
    background-color: #3e8e41;
 +
}
 +
.quickfind {
 +
    position: absolute;
 +
width: 20vw;
 +
left: 40vw;
 +
top: 15vh;
 +
}
 +
.teamNames{
 +
position: relative;
 +
text-align: center;
 +
padding-top: 30px !important;
 +
}
 +
 +
.personName{
 +
 +
font-size: 50px;
 +
font-family: 'Vollkorn', serif !important;
 +
 +
}
 +
 +
.personCodename{
 +
position: relative;
 +
font-size: 30;
 +
font-style: bold;
 +
font-family: 'Wallpoet', cursive;
 +
}
 +
 +
.personPicture{
 +
position: relative;
 +
float: left;
 +
margin: 00px 30px 0px 40px;
 +
border-radius: 100%;
 +
    border: 4px solid #0A1215;
 +
width: 180px;
 +
height: 180px;
 +
 +
}
 +
 +
.personDescription{
 +
position: relative;
 +
margin: 30px 80px -10px 300px;
 +
font-size: 22px;
 +
text-align: center;
 +
 +
}
 +
@media screen and (max-width: 1000px) {
 +
 +
p{
 +
margin-left: 32px;
 +
margin-right: 32px;
 +
}
 +
 +
.contentHolder:hover{
 +
background-color: B5B7B8;
 +
 +
}
 +
.contentHolder{
 +
height: auto;
 +
width: auto;
 +
}
 +
 +
 +
#topTitle{
 +
border-radius: 50px 50px 0px 0px;
 +
opacity: 1;
 +
text-align: center;
 +
font-family: 'Heebo', sans-serif;
 +
font-size: 42px;
 +
height: 0vw;
 +
}
 +
#topTitle:hover{
 +
background-color: B5B7B8;
 +
}
 +
 +
.dropbtn {
 +
    background-color: #4CAF50;
 +
    color: white;
 +
    padding: 16px;
 +
    font-size: 16px;
 +
    border: none;
 +
    cursor: pointer;
 +
width: 50vw;
 +
}
 +
 +
 +
 +
.quickfind-content {
 +
    display: none;
 +
    position: absolute;
 +
    background-color: #f9f9f9;
 +
    width: 50vw;
 +
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 +
    z-index: 1;
 +
}
 +
 +
.quickfind-content a {
 +
    color: black;
 +
    padding: 12px 16px;
 +
    text-decoration: none;
 +
    display: block;
 +
text-align: center;
 +
}
 +
 +
.quickfind-content a:hover {
 +
background-color: #f1f1f1;
 +
 +
}
 +
 +
.quickfind:hover .quickfind-content {
 +
    display: block;
 +
}
 +
 +
.quickfind:hover .dropbtn {
 +
    background-color: #3e8e41;
 +
}
 +
.quickfind {
 +
    position: absolute;
 +
width: 50vw;
 +
left: 25vw;
 +
top: 100px;
 +
}
 +
 +
.teamNames{
 +
top: 16px;
 +
 +
}
 +
.personName{
 +
font-size: 42px;
 +
    font-size: 9.5vw;
 +
}
 +
.personCodename{
 +
font-size: 52px;
 +
    font-size: 7.5vw;
 +
}
 +
 +
.personPicture{
 +
margin-top: 30px;
 +
float: none;
 +
height: auto;
 +
width: 50%;
 +
display: block;
 +
position: relative;
 +
border-radius: 100%;
 +
    border: 4px solid #0A1215;
 +
margin-left: auto;
 +
    margin-right: auto;
 +
 +
 +
}
 +
 +
.personDescription{
 +
position: relative;
 +
margin: 30px 16px 0px 16px;
 +
font-size: 18px;
 +
    font-size: 5vw;
 +
}
 +
}
 +
<--!end mobile->
 +
 +
 +
 +
#scroldown {
 +
  width: 100%;
 +
  height: 20;
 +
 
 +
}
 +
 +
#scroldown::before{
 +
  content: '╲╱';
 +
  color: #fff;
 +
  position: fixed;
 +
  opacity: 0.7;
 +
  text-shadow: 0 0 6px rgba(0,0,0,0.5);
 +
  font-size: 20px;
 +
  width: 60px;
 +
  height: 40px;
 +
  line-height: 40px;
 +
  text-align: center;
 +
  border-radius: 10px;
 +
  bottom: 20px;
 +
  left: 50%;
 +
  margin-left: -30px;
 +
  animation: bounce 1s ease infinite;
 +
}
 +
 +
@keyframes bounce {
 +
  50% {
 +
    transform: translateY(-50%);
 +
  }
 +
  100% {
 +
    transform: translateY(0);
 +
  }
 +
}
 +
 +
#myBtn {
 +
    display: none;
 +
    position: fixed;
 +
    bottom: 20px;
 +
    right: 30px;
 +
    z-index: 99;
 +
    border: none;
 +
    outline: none;
 +
    background-color: green;
 +
    color: white;
 +
    cursor: pointer;
 +
    padding: 15px;
 +
    border-radius: 10px;
 +
    font-size: 18px;
 +
}
 +
 +
#myBtn:hover {
 +
    background-color: #555; /* Add a dark-grey background on hover */
 +
}
 +
</style>
 +
<script>
 +
$(document).ready(function(){
 +
  $("a").on('click', function(event) {
 +
    if (this.hash !== "") {
 +
      event.preventDefault();
 +
      var hash = this.hash;
 +
      $('html, body').animate({
 +
        scrollTop: $(hash).offset().top
 +
      }, 800, function(){
 +
        window.location.hash = hash;
 +
      });
 +
    }
 +
  });
 +
});
 +
</script>
 +
<script>
 +
window.onscroll = function() {scrollFunction()};
 +
 +
function scrollFunction() {
 +
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
 +
        document.getElementById("myBtn").style.display = "block";
 +
    } else {
 +
        document.getElementById("myBtn").style.display = "none";
 +
    }
 +
}
 +
function topFunction() {
 +
    document.body.scrollTop = 0;
 +
    document.documentElement.scrollTop = 0;
 +
}
 +
 +
function burgermenu() {
 +
    var x = document.getElementById("nav");
 +
    if (x.className === "navigation") {
 +
        x.className += " responsive";
 +
    } else {
 +
        x.className = "navigation";
 +
    }
 +
}
 +
</script>
 +
<body>
 +
 +
<!-- CUSTOM OVERLAY -->
 +
<div class="overlays" id="bottomLayer"></div>
 +
<div class="backgroundPicture">
 +
 +
</div>
 +
 +
<div class="quickfind">
 +
  <button class="dropbtn">LEARN MORE</button>
 +
  <div class="quickfind-content">
 +
    <a href="#WHOUSE">PROJECT USE</a>
 +
<a href="#SAFE">IS IT SAFE</a>
 +
    <a href="#USEDSTRAINS">USED ORGANISM STRAINS</a>
 +
    <a href="#RISKS">POTENTIAL RISKS</a>
 +
<a href="#WASTE">WASTE TREATMENT</a>
 +
<a href="#EMERGENCY">EMERGENCY REACTIONS</a>
 +
<a href="#EQUIPMENT">PROTECTIVE EQUIPMENT</a>
 +
<a href="#OTHERS">OTHER RULES</a>
 +
  </div>
 +
</div>
 +
 +
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
 +
<!-- CUSTOM TOP -->
 +
<div class="contentHolder" id="topTitle">
 +
<a id="pagetitle">WELCOME</a>
 +
</div>
 +
</div>
 +
 +
 +
<div id="scroldown"></div>
 +
 +
 +
<!-- CUSTOM CONTENT HOLDER -->
 +
<div class="contentHolder" id="SAFE">
 +
<h1>THE IDEA</h1>
 +
<p>Our project idea was inspired mostly by a donation
 +
campaign for a colleague of ours, organised in our faculty.
 +
We dived head-first into this problem and uncovered that the
 +
average survival rates for Bulgarian patients with cystic fibrosis
 +
are far lower than those for patients living in more developed countries.
 +
One of the main reasons behind that contrast is untimely diagnosis. This
 +
served as a huge push for us to try and develop our system and, in a way,
 +
try to give a second chance to patients by providing timely diagnosis. We
 +
presented the problem and our solution at various different science-oriented
 +
events - Sofia Science Festival 2018, for instance. We also organized our own
 +
campaign, The 65 SynBio Roses, in which we had people draw and/or color roses,
 +
some of which - with iGEM chromoproteins. This way, we managed to introduce people
 +
not only to an important issue in need of a solution, but to synthetic biology’s
 +
problem-solving potential, too. We chose our very publicly oriented approach in
 +
order to engage as large of an audience as possible. This helped us learn the
 +
perspectives of people that do not know much (or at all) about science and
 +
showed us the many ways others’ opinions and ideas can have an impact on your own.
 +
</p>
 +
</div>
 +
 +
 +
 +
<!-- CUSTOM MENU -->
 +
<div class="navigation" id="nav">
 +
  <a href="https://2018.igem.org/Team:Bulgaria" id="activeMenu">HOME</a>
 +
  <a href="https://2018.igem.org/Team:Bulgaria/theteam" >TEAM</a>
 +
  <a href="https://2018.igem.org/Team:Bulgaria/theproject">PROJECT</a>
 +
  <a href="https://2018.igem.org/Team:Bulgaria/humanPractices" >HUMAN PRACTICES</a>
 +
  <a href="https://2018.igem.org/Team:Bulgaria/collabs" >COLLABORATIONS</a>
 +
  <a href="https://2018.igem.org/Team:Bulgaria/parts" >PARTS</a>
 +
  <a href="https://2018.igem.org/Team:Bulgaria/safety">SAFETY</a>
 +
  <a href="https://2018.igem.org/Team:Bulgaria/jForm" id="specialMenu">JUDGING FORM</a>
 +
  <a href="javascript:void(0);" class="icon" onclick="burgermenu()">
 +
MENU
 +
  </a>
 +
 +
</div>
 +
</body>
 
</html>
 
</html>

Revision as of 01:20, 17 October 2018

PROJECT USE IS IT SAFE USED ORGANISM STRAINS POTENTIAL RISKS WASTE TREATMENT EMERGENCY REACTIONS PROTECTIVE EQUIPMENT OTHER RULES

THE IDEA

Our project idea was inspired mostly by a donation campaign for a colleague of ours, organised in our faculty. We dived head-first into this problem and uncovered that the average survival rates for Bulgarian patients with cystic fibrosis are far lower than those for patients living in more developed countries. One of the main reasons behind that contrast is untimely diagnosis. This served as a huge push for us to try and develop our system and, in a way, try to give a second chance to patients by providing timely diagnosis. We presented the problem and our solution at various different science-oriented events - Sofia Science Festival 2018, for instance. We also organized our own campaign, The 65 SynBio Roses, in which we had people draw and/or color roses, some of which - with iGEM chromoproteins. This way, we managed to introduce people not only to an important issue in need of a solution, but to synthetic biology’s problem-solving potential, too. We chose our very publicly oriented approach in order to engage as large of an audience as possible. This helped us learn the perspectives of people that do not know much (or at all) about science and showed us the many ways others’ opinions and ideas can have an impact on your own.