Difference between revisions of "Team:TecCEM"

 
(170 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
{{TecCEM/Menu}}
+
{{TecCEM/header_generator_test}}
−
<html>
+
<html lang="en">
−
<head>
+
  <head>
−
<meta charset="utf-8">
+
    <meta charset="UTF-8" />
−
<title>Untitled Document</title>
+
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
−
</head>
+
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 +
    <title>Document</title>
  
−
<body>
+
    <style>
−
<div class="Imagen_principal">
+
      @import url("https://fonts.googleapis.com/css2?family=Nunito:wght@700&family=Roboto&display=swap");
−
<img src="https://static.igem.org/mediawiki/2021/9/9f/T--TecCEM--FotoEquipoTexem.jpg" alt="">
+
      deMenu,
−
<div class="Titulo">
+
      #top_title,
−
<h1 style= "font-family: 'Nunito', Times; font-weight: bold">Team</h1>
+
      .patrollink,
−
</div>
+
      #firstHeading,
−
<div class="Difuminado"></div>
+
      #home_logo,
−
</div>
+
      #sideMenu {
−
+
        display: none;
−
<div class="cuerpo_principal">
+
      }
−
+
 
−
<div class="Espacio_menu_lateral">
+
      #content {
−
+
        padding: 0px;
−
</div>
+
        width: 100%;
−
+
        margin-top: -7px;
−
<div class="Texto" style="display: flex">
+
        margin-left: 0px;
−
<h2 id="primer">Título 1</h2>
+
        border: none;
−
<p class="txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, aperiam provident tempora. Deleniti neque dolorem veritatis ipsa maiores nihil optio in labore dolorum, eius quas rem facilis, maxime soluta temporibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas saepe porro eveniet cum minima error obcaecati est qui ex ea eligendi omnis molestiae consequuntur voluptates, ullam commodi praesentium et possimus.</p>
+
      }
−
+
 
−
<h2 id="segundo">Título 2</h2>
+
      #bodyContent h1,
−
<p class="txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, aperiam provident tempora. Deleniti neque dolorem veritatis ipsa maiores nihil optio in labore dolorum, eius quas rem facilis, maxime soluta temporibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas saepe porro eveniet cum minima error obcaecati est qui ex ea eligendi omnis molestiae consequuntur voluptates, ullam commodi praesentium et possimus.</p>
+
      #bodyContent h2,
−
+
      #bodyContent h3,
−
<h2 id="tercero">Título 3</h2>
+
      #bodyContent h4,
−
<p class="txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, aperiam provident tempora. Deleniti neque dolorem veritatis ipsa maiores nihil optio in labore dolorum, eius quas rem facilis, maxime soluta temporibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas saepe porro eveniet cum minima error obcaecati est qui ex ea eligendi omnis molestiae consequuntur voluptates, ullam commodi praesentium et possimus.</p>
+
      #bodyContent h5 {
−
+
        margin-bottom: 0px;
−
<h2 id="cuarto">Título 4</h2>
+
      }
−
<p style="font-family: 'Roboto', sans-serif; text-align: justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, aperiam provident tempora. Deleniti neque dolorem veritatis ipsa maiores nihil optio in labore dolorum, eius quas rem facilis, maxime soluta temporibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas saepe porro eveniet cum minima error obcaecati est qui ex ea eligendi omnis molestiae consequuntur voluptates, ullam commodi praesentium et possimus.</p>
+
 
−
+
      #bodyContent a[href ^="https://"],
−
<img id="fig1" src="https://static.igem.org/mediawiki/2021/9/9f/T--TecCEM--FotoEquipoTexem.jpg" alt="">
+
        .link-https {
−
+
        padding-right: 0px;
−
<p class="Caption">Fig 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, nam, maiores. Inventore ex eum doloremque eligendi id, voluptates quod illum, dolore deserunt iste alias. Dolor libero illo hic, temporibus harum.</p>
+
      }
−
+
 
−
<h2 id="quinto">Título 5</h2>
+
      * {
−
<div><p style="font-family: 'Roboto', sans-serif; text-align: justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, aperiam provident tempora. Deleniti neque dolorem veritatis ipsa maiores nihil optio in labore dolorum, eius quas rem facilis, maxime soluta temporibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas saepe porro eveniet cum minima error obcaecati est qui ex ea eligendi omnis molestiae consequuntur voluptates, ullam commodi praesentium et.
+
        box-sizing: border-box;
−
<div class="Apacite">
+
        margin: 0;
−
<p style="font-family: 'Roboto', sans-serif; text-align: justify">Altan A et al. (2020)</p>
+
        padding: 0;
−
<span class="cite">
+
      }
−
<h3>Referencia</h3>
+
 
−
<p>[3] Altan, A., & Karasu, S. (2020). Recognition of COVID-19 disease from X-ray images by hybrid model consisting of 2D curvelet transform, chaotic salp swarm algorithm and deep learning technique. Chaos, Solitons and Fractals, 140, 110071. https://doi.org/10.1016/j.chaos.2020.110071</p>
+
      h1 {
−
</span>
+
        font-size: 50px;
 +
      }
 +
 
 +
      .content {
 +
        background: rgb(2, 0, 36);
 +
        background: linear-gradient(
 +
          0deg,
 +
          rgba(2, 0, 36, 1) 0%,
 +
          rgba(4, 102, 171, 1) 0%,
 +
          rgba(181, 217, 255, 1) 40%,
 +
          rgba(173, 244, 255, 1) 100%
 +
        );
 +
        padding-bottom: 300px;
 +
      }
 +
 
 +
      header {
 +
        height: 80vh;
 +
        display: flex;
 +
        justify-content: center;
 +
        align-items: center;
 +
      }
 +
 
 +
      .container {
 +
        display: flex;
 +
        padding-bottom: 130px;
 +
        padding-top: 50px;
 +
      }
 +
 
 +
      .item-10 {
 +
        text-align: center;
 +
        width: 10%;
 +
        height: 30vh;
 +
        padding-top: 1em;
 +
        padding-bottom: 1em;
 +
      }
 +
 
 +
      .item-20 {
 +
        text-align: center;
 +
        width: 20%;
 +
        height: 30vh;
 +
        padding-top: 1em;
 +
        padding-bottom: 1em;
 +
      }
 +
 
 +
      .item-30 {
 +
        text-align: center;
 +
        width: 30%;
 +
        height: 30vh;
 +
        padding-top: 1em;
 +
        padding-bottom: 1em;
 +
      }
 +
 
 +
      .item-40 {
 +
        text-align: center;
 +
        width: 40%;
 +
        height: 30vh;
 +
        padding-top: 1em;
 +
        padding-bottom: 1em;
 +
      }
 +
 
 +
      .item-50 {
 +
        text-align: center;
 +
        width: 50%;
 +
        height: 30vh;
 +
        padding-top: 1em;
 +
        padding-bottom: 1em;
 +
      }
 +
 
 +
      .item-60 {
 +
        text-align: center;
 +
        width: 60%;
 +
        height: 30vh;
 +
        padding-top: 1em;
 +
        padding-bottom: 1em;
 +
      }
 +
 
 +
      .item-70 {
 +
        text-align: center;
 +
        width: 70%;
 +
        height: 30vh;
 +
        padding-top: 1em;
 +
        padding-bottom: 1em;
 +
      }
 +
 
 +
      .item-80 {
 +
        text-align: center;
 +
        width: 80%;
 +
        height: 30vh;
 +
        padding-top: 1em;
 +
        padding-bottom: 1em;
 +
      }
 +
 
 +
      .item-90 {
 +
        text-align: center;
 +
        width: 90%;
 +
        height: 30vh;
 +
        padding-top: 1em;
 +
        padding-bottom: 1em;
 +
      }
 +
 
 +
      .item-100 {
 +
        text-align: center;
 +
        width: 100%;
 +
        height: 30vh;
 +
        padding-top: 1em;
 +
        padding-bottom: 1em;
 +
      }
 +
 
 +
      .animation_1 {
 +
        background-repeat: no-repeat;
 +
        background-position: center;
 +
        position: relative;
 +
        overflow: hidden;
 +
      }
 +
 
 +
      .animation_2 {
 +
        background-repeat: no-repeat;
 +
        background-position: center;
 +
        position: relative;
 +
        overflow: hidden;
 +
      }
 +
 
 +
      .animation_3 {
 +
        background-repeat: no-repeat;
 +
        background-position: center;
 +
        position: relative;
 +
        overflow: hidden;
 +
      }
 +
 
 +
      .drop_1 {
 +
        height: 150px;
 +
        position: absolute;
 +
        top: 30px;
 +
        left: 75%;
 +
      }
 +
 
 +
      .drop_2 {
 +
        height: 150px;
 +
        position: absolute;
 +
        top: 30 px;
 +
        left: 25%;
 +
      }
 +
 
 +
      .drop_3 {
 +
        height: 150px;
 +
        position: absolute;
 +
        top: 30px;
 +
        left: 73%;
 +
      }
 +
 
 +
      .datos,
 +
      .problematica,
 +
      .deteccion,
 +
      .remocion,
 +
      .resultados,
 +
      .impacto {
 +
        opacity: 0;
 +
        transition: 400ms;
 +
      }
 +
 
 +
      .show {
 +
        opacity: 1;
 +
        transition: 3s;
 +
      }
 +
 
 +
      .menu_close {
 +
        position: absolute;
 +
        top: 0;
 +
        left: 0;
 +
        z-index: 999;
 +
        display: flex;
 +
        justify-content: flex-start;
 +
        cursor: pointer;
 +
      }
 +
      .menu_icon {
 +
        top: 30px;
 +
        height: 90%;
 +
        width: 10%;
 +
        display: flex;
 +
        flex-direction: column;
 +
        justify-content: center;
 +
        align-items: center;
 +
      }
 +
      .menu_icon img {
 +
        width: 100%;
 +
        display: block;
 +
        margin: 0;
 +
        margin-left: auto;
 +
        margin-right: auto;
 +
      }
 +
      /*=============== SubMenus ==========*/
 +
      .menu_icon:hover .menu_item {
 +
        display: block;
 +
        visibility: visible;
 +
      }
 +
 
 +
      .menu_item {
 +
        margin-left: 0%;
 +
        margin-top: 92%;
 +
        display: none;
 +
        padding-top: 50%;
 +
        top: 115px;
 +
        position: absolute;
 +
        list-style: none;
 +
        transition: transform 0.6s ease-out;
 +
        visibility: hidden;
 +
        margin-left: auto;
 +
        margin-right: auto;
 +
      }
 +
      .menu_item > li {
 +
        position: relative;
 +
        display: inline-block;
 +
        padding: 0px;
 +
        margin-bottom: 5px;
 +
        padding: 10px 12px;
 +
        padding-top: 220px;
 +
      }
 +
 
 +
      .menu_item > li:hover {
 +
        text-decoration: underline;
 +
        text-decoration-color: white;
 +
        cursor: pointer;
 +
      }
 +
 
 +
      /*======================================*/
 +
 
 +
      .menu_hidden {
 +
        transform: translateX(-0%) translateY(-70%);
 +
        /*100% - .menu.height + .menu_teccem.heigh
 +
      100 - 35 + 25 = 90
 +
      100 + 35 - 55 - 10 =
 +
      */
 +
      }
 +
      .menu_iconos {
 +
        width: 100vw;
 +
        height: 100%;
 +
        /*background: green;  - jose's edit*/
 +
        padding-left: 5rem;
 +
        padding-right: 1.5rem;
 +
        overflow: hidden;
 +
        display: flex;
 +
        flex-wrap: wrap;
 +
        justify-content: space-around;
 +
        align-content: center;
 +
      }
 +
      .menu_teccem > p {
 +
        font-size: 25px;
 +
      }
 +
      .menu_teccem {
 +
        height: 50%;
 +
        padding: 0;
 +
        display: flex;
 +
        justify-content: center;
 +
        align-items: center;
 +
        z-index: 9999;
 +
      }
 +
      .menu {
 +
        display: flex;
 +
        flex-direction: column;
 +
        align-items: center;
 +
        transition: transform 0.6s ease-out;
 +
        position: absolute;
 +
        width: 97vw;
 +
        margin-top: 0;
 +
        /*background: red;  -jose's edit*/
 +
        top: 0.5%;
 +
        z-index: 9999;
 +
      }
 +
 
 +
      .animated {
 +
        transform: translatey(0px);
 +
        animation: float 6s ease-in-out infinite;
 +
      }
 +
 
 +
      .animated2 {
 +
        transform: translatey(0px);
 +
        animation: float2 6s ease-in-out infinite;
 +
      }
 +
 
 +
      @keyframes float {
 +
        0% {
 +
          transform: translatey(0px);
 +
        }
 +
        50% {
 +
          transform: translatey(-13px);
 +
        }
 +
        100% {
 +
          transform: translatey(0px);
 +
        }
 +
      }
 +
 
 +
      @keyframes float2 {
 +
        0% {
 +
          transform: translatey(-10px);
 +
        }
 +
        50% {
 +
          transform: translatey(0px);
 +
        }
 +
        100% {
 +
          transform: translatey(-10px);
 +
        }
 +
      }
 +
    </style>
 +
    <script>
 +
      window.onload = function () {
 +
        generate_header(
 +
          "Tec CEM",
 +
          "https://www.solidbackgrounds.com/images/950x350/950x350-sky-blue-solid-color-background.jpg",
 +
          "#FDE68A",
 +
          "#0099ff",
 +
          "#acf2fb"
 +
        );
 +
      };
 +
    </script>
 +
  </head>
 +
 
 +
  <body>
 +
    <section class="body">
 +
        <div class="menu">
 +
            <p  
 +
            style="position: absolute; left:15px; top: 490px; font-family:Nunito,sans-serif; color:white; font-size:70px;"
 +
            >
 +
            Disrupting Disruptors
 +
            </p>
 +
            <div class="menu_iconos">
 +
                <div class="menu_icon">
 +
<a href="https://2021.igem.org/Team:TecCEM">
 +
<img
 +
                    src="https://static.igem.org/mediawiki/2021/0/04/T--TecCEM--main.svg"
 +
                    alt=""
 +
                    class="animated2"
 +
                  />
 +
                  <img
 +
                src="https://static.igem.org/mediawiki/2021/b/b0/T--TecCEM--waves.png"
 +
                class="animated2"
 +
                style="position: relative; top: -30px;"
 +
                alt=""
 +
              />
 +
</a>
 +
<p style="font-size: 2rem; font-family: 'Nunito', Times; font-weight: bold;color: white;">Home</p>
 
</div>
 
</div>
−
<p style="font-family: 'Roboto', sans-serif; text-align: justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid modi, hic illo? Saepe necessitatibus, vero quaerat aliquam minus qui. Eveniet aperiam illum praesentium eaque enim? Ipsam labore mollitia quos, atque?</p></p>
+
<div class="menu_icon">
−
+
<a href="https://2021.igem.org/Team:TecCEM/Team">
 +
<img
 +
                    src="https://static.igem.org/mediawiki/2021/6/6d/T--TecCEM--CEM_equipo_icono.svg"
 +
                    alt=""
 +
                    class="animated"
 +
                  />
 +
                  <img
 +
                src="https://static.igem.org/mediawiki/2021/b/b0/T--TecCEM--waves.png"
 +
                class="animated"
 +
                style="position: relative; top: -30px;"
 +
                alt=""
 +
              />
 +
</a>
 +
 +
<p style="font-size: 2rem; font-family: 'Nunito', Times; font-weight: bold;color: white;">Team</p>
 +
<ul class = "menu_item">
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Team" style="color: white">Members</a></li>
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Collaborations" style="color: white">Collaborations</a></li>
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Attributions" style="color: white">Attributions</a></li>
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Contribution" style="color: white">Contribution</a></li>
 +
</ul>
 +
</div>
 +
<div class="menu_icon">
 +
<a href="https://2021.igem.org/Team:TecCEM/Description">
 +
<img
 +
                    src="https://static.igem.org/mediawiki/2021/5/58/T--TecCEM--Proyecto_Icono_texem.svg"
 +
                    alt=""
 +
                    class="animated2"
 +
                  />
 +
                  <img
 +
                src="https://static.igem.org/mediawiki/2021/b/b0/T--TecCEM--waves.png"
 +
                class="animated2"
 +
                style="position: relative; top: -30px;"
 +
                alt=""
 +
              />
 +
</a>
 +
<p style="font-size: 2rem; font-family: 'Nunito', Times; font-weight: bold;color: white;">Project</p>
 +
<ul class = "menu_item">
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Description" style="color: white">Description</a></li>
 +
 
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Notebook" style="color: white">Notebook</a></li>
 +
 
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Implementation" style="color: white">Implementation</a></li>
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Results" style="color: white">Results</a></li>
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Results_Zetasizer" style="color: white">Particle detection</a></li>
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Engineering" style="color: white">Engineering</a></li>
 +
 +
 +
</ul>
 +
</div>
 +
<div class="menu_icon">
 +
 +
<a href="https://2021.igem.org/Team:TecCEM/Safety">
 +
                        <img
 +
                        src="https://static.igem.org/mediawiki/2021/b/ba/T--TecCEM--TecCEMpremiosicono.svg"
 +
                        alt=""
 +
                        class="animated"
 +
                      />
 +
                      <img
 +
                    src="https://static.igem.org/mediawiki/2021/b/b0/T--TecCEM--waves.png"
 +
                    class="animated"
 +
                    style="position: relative; top: -30px;"
 +
                    alt=""
 +
                  />
 +
</a>
 +
<p style="font-size: 2rem; font-family: 'Nunito', Times; font-weight: bold; color: white;">Awards</p>
 +
<ul class = "menu_item">
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Model" style="color: white">Model</a></li>
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Hardware" style="color: white">Hardware</a></li>
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Software" style="color: white">Software</a></li>
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Sustainable" style="color: white">Sustainable Development Goals</a></li>
 +
 
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Safety" style="color: white">Safety</a></li>
 +
 +
</ul>
 +
</div>
 +
<div class="menu_icon">
 +
<a href="https://2021.igem.org/Team:TecCEM/Human_Practices">
 +
<img
 +
                    src="https://static.igem.org/mediawiki/2021/1/1d/T--TecCEM--HumanPractices_Icono_Texem.svg"
 +
                    alt=""
 +
                    class="animated2"
 +
                  />
 +
                  <img
 +
                src="https://static.igem.org/mediawiki/2021/b/b0/T--TecCEM--waves.png"
 +
                class="animated2"
 +
                style="position: relative; top: -30px;"
 +
                alt=""
 +
              />
 +
</a>
 +
<p style="font-size: 2rem; font-family: 'Nunito', Times; font-weight: bold;color: white;">Human Practices</p>
 +
<ul class = "menu_item">
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;color: white;"><a href="https://2021.igem.org/Team:TecCEM/Human_Practices" style="color: white">Human Practices</a></li>
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;color: white;"><a href="https://2021.igem.org/Team:TecCEM/Communication" style="color: white">Education and Engagement</a></li>
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Results_Survey" style="color: white">Survey Results</a></li>
 +
</ul>
 +
</div>
 +
<div class="menu_icon">
 +
<a href="https://2021.igem.org/Team:TecCEM/Parts">
 +
<img
 +
                    src="https://static.igem.org/mediawiki/2021/archive/c/ce/20211005011830%21T--TecCEM--Biobrick_Icono_Texem.svg"
 +
                    alt=""
 +
                    class="animated"
 +
                  />
 +
                  <img
 +
                src="https://static.igem.org/mediawiki/2021/b/b0/T--TecCEM--waves.png"
 +
                class="animated"
 +
                style="position: relative; top: -30px;"
 +
                alt=""
 +
              />
 +
</a>
 +
<p style="font-size: 2rem; font-family: 'Nunito', Times; font-weight: bold;color: white;">Parts</p>
 +
<ul class = "menu_item">
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;color: white;"><a href="https://2021.igem.org/Team:TecCEM/Parts" style="color: white">Overview</a></li>
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;color: white;"><a href="https://2021.igem.org/Team:TecCEM/Biosensorparts" style="color: white">Biosensor Parts</a></li>
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;color: white;"><a href="https://2021.igem.org/Team:TecCEM/SelectionMarkerParts" style="color: white">Selection Marker Parts</a></li>
 +
</ul>
 +
</div>
 +
<div class="menu_icon">
 +
<a href="https://igem.org/2021_Judging_Form?team=TecCEM">
 +
<img
 +
                    src="https://static.igem.org/mediawiki/2021/a/a1/T--TecCEM--Form_Icono_Texem.svg"
 +
                    alt=""
 +
                    class="animated2"
 +
                  />
 +
                  <img
 +
                src="https://static.igem.org/mediawiki/2021/b/b0/T--TecCEM--waves.png"
 +
                class="animated2"
 +
                style="position: relative; top: -30px;"
 +
                alt=""
 +
              />
 +
</a>
 +
<p style="font-size: 2rem; font-family: 'Nunito', Times; font-weight: bold;color: white;">Judging form</p>
 +
</div>
 +
</div>
 +
<div class="menu_teccem">
 
 
 
</div>
 
</div>
−
</div>
+
          </div>
−
+
         
−
</div>
+
      <div class="overlay_container landing_image_div"></div>
−
<div class="menu_lateral" id="menu_lateral">
+
      <section class="content">
−
<ul style="list-style: none; margin: 0; padding: 0;">
+
        <header>
−
<li style="margin-top: 1rem; cursor: default; font-weight: bold; font-size: 1.5rem; font-family: Times; border-bottom: 1px solid #000">
+
          <center>
−
<center>Index</center></li>
+
            <h1 style="padding-bottom: 20px; font-family: 'Nunito', Times">
−
<li id="to1" class="menu_section">Primer Título</li>
+
              Detecting compounds in an easy, fast and affordable manner:
−
<li id="to2" class="menu_section">Trabajo en laboratorio sobre</li>
+
            </h1>
−
<li id="to3" class="menu_section">Tercer Título</li>
+
            <h1 style="padding-bottom: 20px; font-family: 'Nunito', Times">
−
<li id="to4" class="menu_section">Cuarto Título</li>
+
              Disrupting Disruptors. An Endocrine Disrupting Chemicals
−
<li id="to5" class="menu_section">Quinto Título</li>
+
            </h1>
−
</ul>
+
            <h1 style="padding-bottom: 20px; font-family: 'Nunito', Times">
−
</div>
+
              sensing device
−
<div class="survey">
+
            </h1>
−
<p><a href="https://surveymethods.com/" title="Survey Software">Survey Software</a> powered by <a  
+
            <h5 style="font-size: 18px; font-weight: normal">
−
href="https://surveymethods.com" title="Survey Software"> SurveyMethods.com</a></p>
+
              <strong>Key Concepts:</strong> Microplastics, Endocrine Disruptive
−
</div>
+
              Chemicals (EDCs), Biosensor, Human Estrogen Receptor (hER⍺, ESR1),
 +
              Piezoelectric Sensor.
 +
            </h5>
 +
          </center>
 +
        </header>
 +
        <div style="height: 2px;"></div>
 +
        <section class="animation_1">
 +
          <img
 +
            class="drop_1"
 +
            src="https://static.igem.org/mediawiki/2021/6/66/T--TecCEM--contaminatedwater.svg"
 +
            alt="img"
 +
          />
 +
          <div class="container">
 +
            <div class="item-20">
 +
              <img
 +
                src="https://static.igem.org/mediawiki/2021/6/6e/T--TecCEM--data.svg"
 +
                width="250px"
 +
                height="650px"
 +
                style="position: absolute; left: 20px; bottom: 290px"
 +
                alt=""
 +
              />
 +
            </div>
 +
            <div class="item-50">
 +
              <h1 style="padding-bottom: 20px; font-family: 'Nunito', Times">
 +
                Let’s explore some facts...
 +
              </h1>
 +
              <p class="datos" style="font-size: 14.7px">
 +
                Microplastics are generated by the incomplete degradation of plastics from cosmetics, bottles,textile industry, fibers and other plastic related products. They may also be intentionally manufactured.</br>
 +
                Microplastics have a size of 5 mm or lower and may be composed of different materials such as Polyester fibers. </br>
 +
                Endocrine Disrupting Chemicals (EDCs) are compounds that mimic certain hormones and interfere with body signaling.</br>
 +
                EDCs may have its origin from the degradation of microplastics and processes related to plastic bottles manufacturing.</br>
 +
                Currently, there aren’t any methods with the needed quality to detect EDCs in an efficient manner. Most methods are either too expensive or not reliable enough. </br>
 +
                The lack of quantifying methods has an impact on the existing regulations and standards regarding the quality of drinking water, since they usually don’t take into account either Microplastics or EDCs.</br></p>
 +
            </div>
 +
            <div class="item-30"></div>
 +
          </div>
 +
          <div class="container">
 +
            <div class="item-40"></div>
 +
            <div class="item-40">
 +
              <h1 style="padding-bottom: 20px; font-family: 'Nunito', Times">
 +
                Problematic
 +
              </h1>
 +
              <p class="problematica" style="font-size: 15.5px">
 +
                Microplastics are a huge problem and many researchers and even
 +
                some iGEM Teams are trying to put a stop to them. However, have
 +
                you heard about Endocrine Disrupting Chemicals? If not, don’t
 +
                feel bad, many people including regulatory agencies from all
 +
                around the world have overlooked them. Endocrine Disrupting
 +
                Chemicals or EDCs are dangerous compounds that come from many
 +
                sources but are mostly associated with the degradation of
 +
                certain plastics and its manufacturing processes. They may even
 +
                be found in drinkable water, so we are exposed to them o a
 +
                regular basis. Besides, their detection is a challenge due to
 +
                their characteristics: they are too small and there are too
 +
                many. In addition, they are difficult to eliminate from water
 +
                and accumulate in the organism that consumes them. EDCs are
 +
                related to several diseases that range from metabolic and
 +
                hormonal health issues to even cancer. We want to tackle this
 +
                problem, we want to detect them and even eliminate them.
 +
              </p>
 +
            </div>
 +
            <div class="item-20">
 +
              <img
 +
                src="https://static.igem.org/mediawiki/2021/9/98/T--TecCEM--problematic.svg"
 +
                width="250px"
 +
                height="650px"
 +
                style="position: absolute; right: 20px; top: 310px"
 +
                alt=""
 +
              />
 +
            </div>
 +
          </div>
 +
        </section>
 +
        <section class="animation_2">
 +
          <img
 +
            class="drop_2"
 +
            src="https://static.igem.org/mediawiki/2021/6/66/T--TecCEM--contaminatedwater.svg"
 +
            alt="img"
 +
          />
 +
          <div class="container">
 +
            <div class="item-50"></div>
 +
            <div class="item-30">
 +
              <h1 style="padding-bottom: 20px; font-family: 'Nunito', Times">
 +
                Detection
 +
              </h1>
 +
              <p class="deteccion" style="font-size: 16px">
 +
                We began the development of our own biosensor which has several
 +
                characteristics that make it unique. Our inspiration came from
 +
                our research, in which we found that several people had already
 +
                developed a biosensor for the detection of these compounds.
 +
                However, they had some problems that include a high sensitivity
 +
                towards interference and the potential to become too expensive.
 +
                So we decided to implement a biosensor that could measure EDCs
 +
                in situ, that could be fast and easy to use, in addition to
 +
                being cheaper to produce. This biosensor will work through the
 +
                immobilization of hER⍺ protein receptor on a quartz, which is
 +
                part of a piezoelectric sensor.
 +
              </p>
 +
            </div>
 +
            <div class="item-20">
 +
              <img
 +
                src="https://static.igem.org/mediawiki/2021/9/9a/T--TecCEM--detection.svg"
 +
                width="250px"
 +
                height="650px"
 +
                style="position: absolute; right: 20px; bottom: 260px"
 +
                alt=""
 +
                alt=""
 +
              />
 +
            </div>
 +
          </div>
 +
          <div class="container">
 +
            <div class="item-20">
 +
              <img
 +
                src="https://static.igem.org/mediawiki/2021/1/13/T--TecCEM--degradation2.svg"
 +
                width="250px"
 +
                height="650px"
 +
                style="position: absolute; left: 20px; top: 310px"
 +
                alt=""
 +
              />
 +
            </div>
 +
            <div class="item-30">
 +
              <h1 style="padding-bottom: 20px; font-family: 'Nunito', Times">
 +
                Degradation
 +
              </h1>
 +
              <p class="remocion" style="font-size: 16px">
 +
                We know that detection isn’t enough in our battle against EDCs
 +
                so we decided to also get into the degradation of these harmful
 +
                compounds. We used a Laccase from another iGEM Team and we
 +
                established a protocol that could help us to mass produce this
 +
                enzyme. In the future, we plan on introducing this step as part
 +
                of the purification process of fresh water.
 +
              </p>
 +
            </div>
 +
            <div class="item-50">
 +
              <img
 +
                src="https://static.igem.org/mediawiki/2021/7/73/T--TecCEM--science.svg"
 +
                width="500px"
 +
                height="300px"
 +
                style="position: absolute; left: 60%; bottom: 4"
 +
                alt=""
 +
              />
 +
            </div>
 +
          </div>
 +
        </section>
 +
        <section class="animation_3">
 +
          <img
 +
            class="drop_3"
 +
            src="https://static.igem.org/mediawiki/2021/3/36/T--TecCEM--cleanwater.svg"
 +
            alt="img"
 +
          />
 +
          <div class="container">
 +
            <div class="item-20"></div>
 +
            <div class="item-50">
 +
              <h1 style="padding-bottom: 20px; font-family: 'Nunito', Times">
 +
                Results
 +
              </h1>
 +
              <p class="resultados" style="font-size: 15.5px">
 +
                We completed the design of the hardware and the software for our
 +
                biosensor. In fact, we created a program that lets users have a
 +
                real time visualization of the oscillation frequency in order to
 +
                analyze the output; moreover, we provided a mathematical model
 +
                to find the exact value of the amount of mass present in the
 +
                sensor. In the molecular section of our project, we tested the
 +
                expression of our protein through some experiments. We designed
 +
                several Biobricks to meet our goals and established the
 +
                conditions to express large quantities of our protein in order
 +
                to standardize the manufacturing process of our Biosensor. With
 +
                the Laccase, we actually managed to conduct an assay and
 +
                determine its activity towards three different substrates. We
 +
                also created a protocol that could be used to mass produce this
 +
                enzyme and use it to purify water from EDCs in a treatment
 +
                facility.
 +
              </p>
 +
            </div>
 +
            <div class="item-30"></div>
 +
          </div>
 +
          <div class="container">
 +
            <div class="item-30">
 +
              <img
 +
                src="https://static.igem.org/mediawiki/2021/b/b3/T--TecCEM--results2.svg"
 +
                width="250px"
 +
                height="650px"
 +
                style="position: absolute; left: 20px; bottom: 290px"
 +
                alt=""
 +
              />
 +
            </div>
 +
            <div class="item-50">
 +
              <h1 style="padding-bottom: 20px; font-family: 'Nunito', Times">
 +
                Impact
 +
              </h1>
 +
              <p class="impacto" style="font-size: 15.5px">
 +
                We hope that in the future we will be able to get our sensor in
 +
                the market. This has huge implications since people could
 +
                measure the amount of EDCs they are exposed to. It could also
 +
                work as a Quality Assurance tool in the manufacturing of plastic
 +
                bottles and the bottled water industry, since companies could
 +
                sell their products guaranteeing to their consumers that their
 +
                water is 100% EDC free. Regulatory agencies might also be
 +
                interested in our sensor and the findings we do with it. Most
 +
                countries don’t have any regulations whatsoever regarding
 +
                microplastics or EDCs as pollutants in drinking water, so we
 +
                hope that our project could be the basis of a new set of Norms
 +
                that enforce the regulation of these contaminants. We’ve also
 +
                aligned our project with three of the Sustainable Development
 +
                Goals, which are “Water and Sanitation”, “Health and Wellness”
 +
                and “Life Below Water”.
 +
              </p>
 +
            </div>
 +
            <div class="item-20">
 +
              <img
 +
                src="https://static.igem.org/mediawiki/2021/2/2b/T--TecCEM--impact-2.svg"
 +
                width="250px"
 +
                height="650px"
 +
                style="position: absolute; right: 20px; top: 310px"
 +
                alt=""
 +
              />
 +
            </div>
 +
          </div>
 +
        </section>
 +
      </section>
 +
    </section>
  
−
</body>
+
    <script
−
<style>
+
      src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js"
−
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,600;0,700;1,600&display=swap');
+
      integrity="sha512-8E3KZoPoZCD+1dgfqhPbejQBnQfBXe8FuwL4z/c8sTrgeDMFEnoyTlH3obB4/fV+6Sg0a0XF+L/6xS4Xx1fUEg=="
−
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
+
      crossorigin="anonymous"
−
+
    ></script>
−
h1{
+
    <script
−
font-family: "Hoefler Text", "Liberation Serif", "Times New Roman", "serif";
+
      src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/debug.addIndicators.js"
−
font-size: 1.3rem;
+
      integrity="sha512-mq6TSOBEH8eoYFBvyDQOQf63xgTeAk7ps+MHGLWZ6Byz0BqQzrP+3GIgYL+KvLaWgpL8XgDVbIRYQeLa3Vqu6A=="
−
}
+
      crossorigin="anonymous"
−
h2, h3, h4{
+
    ></script>
−
font-family: "Hoefler Text", "Liberation Serif", "Times New Roman", "serif";
+
    <script
−
font-size: 2rem;
+
      src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.min.js"
−
}
+
      integrity="sha512-5/OHwmQzDSBS0Ous4/hlYoWLHd06/d2r7LdKZQVBXOA6PvOqWVXtdboiLTU7lQTGyVoKVTNkwi0ol4gHGlw5ww=="
−
+
      crossorigin="anonymous"
−
.txt{
+
    ></script>
−
font-family: Helvetica, sans-serif;
+
    <script
−
font-size: 1.2rem;
+
      src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"
−
text-align: justify;
+
      integrity="sha512-/8phkpsAzxsbuX18zNkQ2gCq4Q5JsWoPo1jHLDeZorPUHRtx9YJxpdk+os05oDhPJVCNzA2/NMl4rmJyQ+6Fvg=="
−
}
+
      crossorigin="anonymous"
−
.survey{
+
    ></script>
−
display: flex;
+
    <script
−
align-content: center;
+
      src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TimelineLite.min.js"
−
justify-content: center;
+
      integrity="sha512-I0VFyPo7hdM7YrEbQ0pvX4bX2904k0+B19u/xBrPrQoMprfcSnIDfGFD8kP52GbAhwtDjkEVhXlQvj8+vkJyew=="
−
align-items: center;
+
      crossorigin="anonymous"
−
}
+
    ></script>
−
body{
+
    <script
−
margin: 0;
+
      src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"
−
padding: 0;
+
      integrity="sha512-ht40uOoiTef4nKq0THVzjIGh3VS108J577LVVgNXnQLXza3doXjoM3owin2vd+Hm6w88k12RIrePIVY2WNzz6Q=="
−
}
+
      crossorigin="anonymous"
−
.Imagen_principal{
+
    ></script>
−
display: flex;
+
    <script
−
align-content: center;
+
      src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/BezierPlugin.min.js"
−
justify-content: center;
+
      integrity="sha512-oOy5+mtZRcqjn6b9k4oj+tk2/hVIetzOAM9Y5cndEHgLxiIGavAz1agbHf6JjGzxXZ2SMbu08Uy1DDF0UwA0qQ=="
−
align-items: center;
+
      crossorigin="anonymous"
−
width: 100vw;
+
    ></script>
−
height: 100vh;
+
    <script>
−
}
+
      const dropPath1 = {
−
.Imagen_principal > img{
+
        curviness: 0.2,
−
width: 100%;
+
        autoRotate: false,
−
height: 100%;
+
        values: [
−
}
+
          {
−
.Titulo{
+
            x: 0,
−
position: absolute;
+
            y: 305,
−
background: white;
+
          },
−
padding: 1rem;
+
          {
−
border-radius: 1rem;
+
            x: -810,
−
z-index: 10;
+
            y: 315,
−
}
+
          },
−
.Titulo > h1{
+
          {
−
display: inline;
+
            x: -810,
−
opacity: 1;
+
            y: 800,
−
font-size: 4rem;
+
          },
−
}
+
          {
−
.Difuminado{
+
            x: 200,
−
width: 100vw;
+
            y: window.innerHeight,
−
height: 100vh;
+
          },
−
position: absolute;
+
        ],
−
z-index: 9;
+
      };
−
background: white;
+
 
−
opacity: .4;
+
      const dropPath2 = {
−
}
+
        curviness: 0.2,
−
.cuerpo_principal{
+
        autoRotate: false,
−
display: flex;
+
        values: [
−
flex-direction: row;
+
          {
−
}
+
            x: 0,
−
.menu_lateral{
+
            y: 350,
−
display: flex;
+
          },
−
transition: transform 0.6s ease-out;
+
          {
−
+
            x: 700,
−
flex-wrap: wrap;
+
            y: 360,
−
width: 10%;
+
          },
−
justify-content: center;
+
          {
−
align-content: center;
+
            x: 700,
−
align-items: center;
+
            y: window.innerHeight,
−
max-height: 45rem;
+
          },
−
position: fixed;
+
        ],
−
top: 10%;
+
      };
−
margin-left: 2rem;
+
 
−
padding: 1rem;
+
      const dropPath3 = {
−
/*transform: translateX(-150%) translateY(0);*/
+
        curviness: 0.2,
−
+
        autoRotate: false,
−
}
+
        values: [
−
.menu_lateral_hidden{
+
          {
−
transform: translateX(0%) translateY(0);
+
            x: 0,
−
/*100% - .menu_lateral.height + .menu_lateral_teccem.heigh
+
            y: 285,
−
100 - 35 + 20 = 85
+
          },
−
*/
+
          {
−
}
+
            x: -850,
−
.Espacio_menu_lateral{
+
            y: 285,
−
width: 17%;
+
          },
−
}
+
          {
−
.menu_lateral li{
+
            x: -850,
−
margin-bottom: 1rem;
+
            y: 510,
−
cursor: pointer;
+
          },
−
transition: all 0.4s ease-out;
+
        ],
−
+
      };
−
}
+
 
−
.menu_section:hover{
+
      const tween1 = new TimelineLite();
−
transform: translateX(10%) translateY(0);
+
 
−
text-decoration: underline;
+
      tween1.add(
−
}
+
        TweenLite.to(".drop_1", 5, {
−
.Texto{
+
          bezier: dropPath1,
−
width: 65%;
+
          ease: Power1.easeInOut,
−
padding: 1rem;
+
        })
−
justify-content: center;
+
      );
−
display: flex;
+
 
−
flex-direction: column;
+
      const tween2 = new TimelineLite();
−
align-items: center;
+
 
−
display: inline;
+
      tween2.add(
−
+
        TweenLite.to(".drop_2", 5, {
−
}
+
          bezier: dropPath2,
−
.Texto h2{
+
          ease: Power1.easeInOut,
−
align-self: left;
+
        })
−
}
+
      );
−
+
 
−
.Texto p {
+
      const tween3 = new TimelineLite();
−
text-align: justify;
+
 
−
display: inline;
+
      tween3.add(
−
}
+
        TweenLite.to(".drop_3", 5, {
−
+
          bezier: dropPath3,
−
.Texto img{
+
          ease: Power1.easeInOut,
−
width: 70%;
+
        })
−
max-height: 500px;
+
      );
−
}
+
 
−
+
      const controller = new ScrollMagic.Controller();
−
.Caption{
+
 
−
width: 70%;
+
      const scene1 = new ScrollMagic.Scene({
−
}
+
        triggerElement: ".animation_1",
−
html, body {
+
        duration: 1000,
−
    height: 100vh;
+
        triggerHook: 0,
−
}
+
      })
−
.cite{
+
        .setTween(tween1)
−
position: absolute;
+
        .setPin(".animation_1")
−
bottom: 55px;
+
        .addTo(controller);
−
width: 500px;
+
−
background: #fff;
+
−
padding: 20px;
+
−
box-sizing: border-box;
+
−
visibility: hidden;
+
−
opacity: 0;
+
−
transition: 0.5s;
+
−
transform: translateX(-50%) translateY(50px)
+
−
}
+
−
.Apacite:hover .cite{
+
−
visibility: visible;
+
−
opacity: 1;
+
−
transform: translateX(-50%) translateY(0px);
+
−
z-index: 99999;
+
−
+
−
}
+
−
.Apacite {
+
−
  position: relative;
+
−
display: inline;
+
−
transition: 0.5s;
+
−
cursor: pointer;
+
−
width: auto;
+
−
}
+
−
.Apacite:hover{
+
−
text-decoration: underline;
+
−
}
+
−
+
−
</style>
+
−
+
−
<script>
+
  
 +
      const scene2 = new ScrollMagic.Scene({
 +
        triggerElement: ".animation_2",
 +
        duration: 1000,
 +
        triggerHook: 0,
 +
      })
 +
        .setTween(tween2)
 +
        .setPin(".animation_2")
 +
        .addTo(controller);
  
−
function getElementY(query) {
+
      const scene3 = new ScrollMagic.Scene({
−
  return window.pageYOffset + document.querySelector(query).getBoundingClientRect().top
+
        triggerElement: ".animation_3",
−
}
+
        duration: 1000,
 +
        triggerHook: 0,
 +
      })
 +
        .setTween(tween3)
 +
        .setPin(".animation_3")
 +
        .addTo(controller);
  
−
function doScrolling(element, duration) {
+
      const datos = new ScrollMagic.Scene({
−
var startingY = window.pageYOffset
+
        triggerElement: ".animation_1",
−
  var elementY = getElementY(element)
+
      })
−
  // If element is close to page's bottom then window will scroll only to some position above the element.
+
        .setClassToggle(".datos", "show")
−
  var targetY = document.body.scrollHeight - elementY < window.innerHeight ? document.body.scrollHeight - window.innerHeight : elementY
+
        .addTo(controller);
−
var diff = targetY - startingY
+
−
  // Easing function: easeInOutCubic
+
−
  // From: https://gist.github.com/gre/1650294
+
−
  var easing = function (t) { return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1 }
+
−
  var start
+
  
−
  if (!diff) return
+
      const problematica = new ScrollMagic.Scene({
 +
        triggerElement: ".animation_1",
 +
      })
 +
        .setClassToggle(".problematica", "show")
 +
        .addTo(controller);
  
−
// Bootstrap our animation - it will get called right before next frame shall be rendered.
+
      const deteccion = new ScrollMagic.Scene({
−
window.requestAnimationFrame(function step(timestamp) {
+
        triggerElement: ".animation_2",
−
    if (!start) start = timestamp
+
      })
−
    // Elapsed miliseconds since start of scrolling.
+
        .setClassToggle(".deteccion", "show")
−
    var time = timestamp - start
+
        .addTo(controller);
−
// Get percent of completion in range [0, 1].
+
−
    var percent = Math.min(time / duration, 1)
+
−
    // Apply the easing.
+
−
    // It can cause bad-looking slow frames in browser performance tool, so be careful.
+
−
    percent = easing(percent)
+
  
−
    window.scrollTo(0, startingY + diff * percent)
+
      const remocion = new ScrollMagic.Scene({
 +
        triggerElement: ".animation_2",
 +
      })
 +
        .setClassToggle(".remocion", "show")
 +
        .addTo(controller);
  
−
// Proceed with animation as long as we wanted it to.
+
      const resultados = new ScrollMagic.Scene({
−
    if (time < duration) {
+
        triggerElement: ".animation_3",
−
      window.requestAnimationFrame(step)
+
      })
−
    }
+
        .setClassToggle(".resultados", "show")
−
  })
+
        .addTo(controller);
−
}
+
  
−
// Apply event handlers. Example of firing the scrolling mechanism.
+
      const impacto = new ScrollMagic.Scene({
−
document.getElementById('to1').addEventListener('click', doScrolling.bind(null, '#primer', 1000))
+
        triggerElement: ".animation_3",
−
document.getElementById('to2').addEventListener('click', doScrolling.bind(null, '#segundo', 1000))
+
      })
−
document.getElementById('to3').addEventListener('click', doScrolling.bind(null, '#tercero', 1000))
+
        .setClassToggle(".impacto", "show")
−
document.getElementById('to4').addEventListener('click', doScrolling.bind(null, '#cuarto', 1000))
+
        .addTo(controller);
−
document.getElementById('to5').addEventListener('click', doScrolling.bind(null, '#quinto', 1000))
+
    </script>
−
</script>
+
  </body>
−
<script>
+
−
$(window).scroll(function(){
+
−
  if($(document).scrollTop() > 650){
+
−
document.querySelector(".menu_lateral").classList.add("menu_lateral_hidden");
+
−
  }else{
+
−
document.querySelector(".menu_lateral").classList.remove("menu_lateral_hidden");
+
−
  }
+
−
});
+
−
</script>
+
−
+
 
</html>
 
</html>
 +
{{TecCEM/Footer}}

Latest revision as of 03:36, 22 October 2021

Document

Disrupting Disruptors

Home

Team

Project

Awards

Human Practices

Parts

Judging form

Detecting compounds in an easy, fast and affordable manner:

Disrupting Disruptors. An Endocrine Disrupting Chemicals

sensing device

Key Concepts: Microplastics, Endocrine Disruptive Chemicals (EDCs), Biosensor, Human Estrogen Receptor (hER⍺, ESR1), Piezoelectric Sensor.
img

Let’s explore some facts...

Microplastics are generated by the incomplete degradation of plastics from cosmetics, bottles,textile industry, fibers and other plastic related products. They may also be intentionally manufactured.
Microplastics have a size of 5 mm or lower and may be composed of different materials such as Polyester fibers.
Endocrine Disrupting Chemicals (EDCs) are compounds that mimic certain hormones and interfere with body signaling.
EDCs may have its origin from the degradation of microplastics and processes related to plastic bottles manufacturing.
Currently, there aren’t any methods with the needed quality to detect EDCs in an efficient manner. Most methods are either too expensive or not reliable enough.
The lack of quantifying methods has an impact on the existing regulations and standards regarding the quality of drinking water, since they usually don’t take into account either Microplastics or EDCs.

Problematic

Microplastics are a huge problem and many researchers and even some iGEM Teams are trying to put a stop to them. However, have you heard about Endocrine Disrupting Chemicals? If not, don’t feel bad, many people including regulatory agencies from all around the world have overlooked them. Endocrine Disrupting Chemicals or EDCs are dangerous compounds that come from many sources but are mostly associated with the degradation of certain plastics and its manufacturing processes. They may even be found in drinkable water, so we are exposed to them o a regular basis. Besides, their detection is a challenge due to their characteristics: they are too small and there are too many. In addition, they are difficult to eliminate from water and accumulate in the organism that consumes them. EDCs are related to several diseases that range from metabolic and hormonal health issues to even cancer. We want to tackle this problem, we want to detect them and even eliminate them.

img

Detection

We began the development of our own biosensor which has several characteristics that make it unique. Our inspiration came from our research, in which we found that several people had already developed a biosensor for the detection of these compounds. However, they had some problems that include a high sensitivity towards interference and the potential to become too expensive. So we decided to implement a biosensor that could measure EDCs in situ, that could be fast and easy to use, in addition to being cheaper to produce. This biosensor will work through the immobilization of hER⍺ protein receptor on a quartz, which is part of a piezoelectric sensor.

Degradation

We know that detection isn’t enough in our battle against EDCs so we decided to also get into the degradation of these harmful compounds. We used a Laccase from another iGEM Team and we established a protocol that could help us to mass produce this enzyme. In the future, we plan on introducing this step as part of the purification process of fresh water.

img

Results

We completed the design of the hardware and the software for our biosensor. In fact, we created a program that lets users have a real time visualization of the oscillation frequency in order to analyze the output; moreover, we provided a mathematical model to find the exact value of the amount of mass present in the sensor. In the molecular section of our project, we tested the expression of our protein through some experiments. We designed several Biobricks to meet our goals and established the conditions to express large quantities of our protein in order to standardize the manufacturing process of our Biosensor. With the Laccase, we actually managed to conduct an assay and determine its activity towards three different substrates. We also created a protocol that could be used to mass produce this enzyme and use it to purify water from EDCs in a treatment facility.

Impact

We hope that in the future we will be able to get our sensor in the market. This has huge implications since people could measure the amount of EDCs they are exposed to. It could also work as a Quality Assurance tool in the manufacturing of plastic bottles and the bottled water industry, since companies could sell their products guaranteeing to their consumers that their water is 100% EDC free. Regulatory agencies might also be interested in our sensor and the findings we do with it. Most countries don’t have any regulations whatsoever regarding microplastics or EDCs as pollutants in drinking water, so we hope that our project could be the basis of a new set of Norms that enforce the regulation of these contaminants. We’ve also aligned our project with three of the Sustainable Development Goals, which are “Water and Sanitation”, “Health and Wellness” and “Life Below Water”.