Difference between revisions of "Team:TecCEM/Carlos"

 
(284 intermediate revisions by the same user not shown)
Line 1: Line 1:
 +
{{TecCEM/header_generator_test}}
 
<html lang="en">
 
<html lang="en">
−
 
+
  <head>
−
<head>
+
 
     <meta charset="UTF-8" />
 
     <meta charset="UTF-8" />
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     <title>Document</title>
 
     <title>Document</title>
 +
 
     <style>
 
     <style>
−
        @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700&family=Roboto&display=swap');
+
      @import url("https://fonts.googleapis.com/css2?family=Nunito:wght@700&family=Roboto&display=swap");
 +
      deMenu,
 +
      #top_title,
 +
      .patrollink,
 +
      #firstHeading,
 +
      #home_logo,
 +
      #sideMenu {
 +
        display: none;
 +
      }
  
−
        #sideMenu,
+
      #content {
−
        #top_title,
+
         padding: 0px;
−
        .patrollink,
+
        width: 100%;
−
        #firstHeading,
+
        margin-top: -7px;
−
        #home_logo,
+
        margin-left: 0px;
−
        #sideMenu {
+
        border: none;
−
            display: none;
+
      }
−
         }
+
 
−
       
+
      #bodyContent h1,
−
        #content {
+
      #bodyContent h2,
−
            padding: 0px;
+
      #bodyContent h3,
−
            width: 100%;
+
      #bodyContent h4,
−
            margin-top: -7px;
+
      #bodyContent h5 {
−
            margin-left: 0px;
+
        margin-bottom: 0px;
−
            border: none;
+
      }
−
        }
+
 
−
       
+
      #bodyContent a[href ^="https://"],
−
        #bodyContent h1,
+
−
        #bodyContent h2,
+
−
        #bodyContent h3,
+
−
        #bodyContent h4,
+
−
        #bodyContent h5 {
+
−
            margin-bottom: 0px;
+
−
        }
+
−
       
+
−
        #bodyContent a[href ^="https://"],
+
 
         .link-https {
 
         .link-https {
−
            padding-right: 0px;
+
        padding-right: 0px;
 +
      }
 +
 
 +
      * {
 +
        box-sizing: border-box;
 +
        margin: 0;
 +
        padding: 0;
 +
      }
 +
 
 +
      h1 {
 +
        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: 100vh;
 +
        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: 70%;
 +
        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: 70px;
 +
      }
 +
 
 +
      .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: 100vw;
 +
        margin-top: 0;
 +
        /*background: red;  -jose's edit*/
 +
        top: 25vh;
 +
        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);
−
            box-sizing: border-box;
+
−
            margin: 0;
+
−
            padding: 0;
+
 
         }
 
         }
−
          
+
         100% {
−
        body,
+
          transform: translatey(0px);
−
        html {}
+
−
       
+
−
        header,
+
−
        footer {
+
−
            height: 100vh;
+
−
            display: flex;
+
−
            justify-content: center;
+
−
            align-items: center;
+
 
         }
 
         }
−
       
+
      }
−
         header h1 {
+
 
−
            font-size: 50px;
+
      @keyframes float2 {
 +
         0% {
 +
          transform: translatey(-10px);
 
         }
 
         }
−
          
+
         50% {
−
        .background {
+
          transform: translatey(0px);
−
            min-height: max-content;
+
−
            background: rgb(79, 71, 218);
+
−
            background: linear-gradient( 151deg, rgba(79, 71, 218, 1) 0%, rgba(222, 5, 217, 1) 35%, rgba(151, 205, 240, 1) 100%);
+
 
         }
 
         }
−
          
+
         100% {
−
        .container {
+
          transform: translatey(-10px);
−
            display: flex;
+
−
        }
+
−
       
+
−
        .item {
+
−
            text-align: center;
+
−
            width: 50%;
+
−
            height: 30vh;
+
−
            padding-top: 1em;
+
−
            padding-bottom: 1em;
+
−
        }
+
−
       
+
−
        .animation_1,
+
−
        .animation_2 {
+
−
            background-repeat: no-repeat;
+
−
            background-position: center;
+
−
            position: relative;
+
−
            overflow: hidden;
+
−
        }
+
−
       
+
−
        .paper_1 {
+
−
            height: 70px;
+
−
            position: absolute;
+
−
            top: -70;
+
−
            left: 60%;
+
−
        }
+
−
       
+
−
        .paper_2 {
+
−
            height: 70px;
+
−
            position: absolute;
+
−
            top: -70;
+
−
            left: 27%;
+
 
         }
 
         }
 +
      }
 
     </style>
 
     </style>
−
</head>
+
    <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>
+
  <body>
−
     <section class="background">
+
     <section class="body">
 +
        <div class="menu">
 +
            <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: 1rem;
 +
                    font-family: 'Nunito', Times;
 +
                    font-weight: bold;
 +
                    color: white;
 +
                  "
 +
                >
 +
                  Inicio
 +
                </p>
 +
              </div>
 +
              <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: 1rem;
 +
                    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: 1rem;
 +
                    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"
 +
                      >Zetasizer Results</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>
 +
                  <li
 +
                    style="
 +
                      font-size: 1rem;
 +
                      font-family: 'Nunito', Times;
 +
                      font-weight: bold;
 +
                    "
 +
                  >
 +
                    <a
 +
                      href="https://2021.igem.org/Team:TecCEM/Proof_Of_Concept"
 +
                      style="color: white"
 +
                      >Proof of concept</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: 1rem;
 +
                    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: 1rem;
 +
                    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>
 +
                </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: 1rem;
 +
                    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: 1rem;
 +
                    font-family: 'Nunito', Times;
 +
                    font-weight: bold;
 +
                    color: white;
 +
                  "
 +
                >
 +
                  Judging form
 +
                </p>
 +
              </div>
 +
            </div>
 +
            <div class="menu_teccem"></div>
 +
          </div>
 +
         
 +
      <div class="overlay_container landing_image_div"></div>
 +
      <section class="content">
 
         <header>
 
         <header>
−
             <h1>Header</h1>
+
          <center>
 +
             <h1 style="padding-bottom: 20px; font-family: 'Nunito', Times">
 +
              Detecting compounds in an easy, fast and affordable manner:
 +
            </h1>
 +
            <h1 style="padding-bottom: 20px; font-family: 'Nunito', Times">
 +
              Disrupting Disruptors. An Endocrine Disrupting Chemicals
 +
            </h1>
 +
            <h1 style="padding-bottom: 20px; font-family: 'Nunito', Times">
 +
              sensing device
 +
            </h1>
 +
            <h5 style="font-size: 18px; font-weight: normal">
 +
              <strong>Key Concepts:</strong> Microplastics, Endocrine Disruptive
 +
              Chemicals (EDCs), Biosensor, Human Estrogen Receptor (hER⍺, ESR1),
 +
              Piezoelectric Sensor.
 +
            </h5>
 +
          </center>
 
         </header>
 
         </header>
 
         <section class="animation_1">
 
         <section class="animation_1">
−
            <img class="paper_1" src="https://static.igem.org/mediawiki/2021/6/66/T--TecCEM--contaminatedwater.svg" alt="img" />
+
          <img
−
            <div class="container">
+
            class="drop_1"
−
                <div class="item">
+
            src="https://static.igem.org/mediawiki/2021/6/66/T--TecCEM--contaminatedwater.svg"
−
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, tempore autem. Explicabo, eligendi beatae. Ab veritatis saepe nesciunt quae exercitationem culpa laborum, tempore unde aperiam repellendus, nemo similique facere soluta laboriosam sit
+
            alt="img"
−
                    pariatur aut impedit rem placeat iste. In, culpa!
+
          />
−
                 </div>
+
          <div class="container">
−
                 <div class="item"></div>
+
            <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>
−
             <div class="container">
+
             <div class="item-50">
−
                <div class="item"></div>
+
              <h1 style="padding-bottom: 20px; font-family: 'Nunito', Times">
−
                <div class="item">
+
                Let’s explore some facts...
−
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, tempore autem. Explicabo, eligendi beatae. Ab veritatis saepe nesciunt quae exercitationem culpa laborum, tempore unde aperiam repellendus, nemo similique facere soluta laboriosam sit
+
              </h1>
−
                    pariatur aut impedit rem placeat iste. In, culpa!
+
              <p class="datos" style="font-size: 14.7px">
−
                 </div>
+
                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>
−
             <div class="container">
+
             <div class="item-30"></div>
−
                <div class="item">
+
          </div>
−
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, tempore autem. Explicabo, eligendi beatae. Ab veritatis saepe nesciunt quae exercitationem culpa laborum, tempore unde aperiam repellendus, nemo similique facere soluta laboriosam sit
+
          <div class="container">
−
                    pariatur aut impedit rem placeat iste. In, culpa!
+
            <div class="item-40"></div>
−
                 </div>
+
            <div class="item-40">
−
                 <div class="item"></div>
+
              <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>
 +
            <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>
 
         <section class="animation_2">
 
         <section class="animation_2">
−
            <img class="paper_2" src="https://static.igem.org/mediawiki/2021/3/36/T--TecCEM--cleanwater.svg" alt="img" />
+
          <img
−
            <div class="container">
+
            class="drop_2"
−
                <div class="item"></div>
+
            src="https://static.igem.org/mediawiki/2021/6/66/T--TecCEM--contaminatedwater.svg"
−
                <div class="item">
+
            alt="img"
−
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, tempore autem. Explicabo, eligendi beatae. Ab veritatis saepe nesciunt quae exercitationem culpa laborum, tempore unde aperiam repellendus, nemo similique facere soluta laboriosam sit
+
          />
−
                    pariatur aut impedit rem placeat iste. In, culpa!
+
          <div class="container">
−
                 </div>
+
            <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>
−
             <div class="container">
+
             <div class="item-20">
−
                <div class="item">
+
              <img
−
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, tempore autem. Explicabo, eligendi beatae. Ab veritatis saepe nesciunt quae exercitationem culpa laborum, tempore unde aperiam repellendus, nemo similique facere soluta laboriosam sit
+
                src="https://static.igem.org/mediawiki/2021/9/9a/T--TecCEM--detection.svg"
−
                    pariatur aut impedit rem placeat iste. In, culpa!
+
                width="250px"
−
                 </div>
+
                 height="650px"
−
                 <div class="item"></div>
+
                 style="position: absolute; right: 20px; bottom: 260px"
 +
                alt=""
 +
                alt=""
 +
              />
 
             </div>
 
             </div>
−
            <div class="container">
+
          </div>
−
                <div class="item"></div>
+
          <div class="container">
−
                 <div class="item">
+
            <div class="item-20">
−
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, tempore autem. Explicabo, eligendi beatae. Ab veritatis saepe nesciunt quae exercitationem culpa laborum, tempore unde aperiam repellendus, nemo similique facere soluta laboriosam sit
+
              <img
−
                    pariatur aut impedit rem placeat iste. In, culpa!
+
                 src="https://static.igem.org/mediawiki/2021/1/13/T--TecCEM--degradation2.svg"
−
                 </div>
+
                width="250px"
 +
                 height="650px"
 +
                style="position: absolute; left: 20px; top: 310px"
 +
                alt=""
 +
              />
 
             </div>
 
             </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>
−
         <footer>
+
         <section class="animation_3">
−
             <h1>Footer</h1>
+
          <img
−
         </footer>
+
             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>
  
−
        <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js" integrity="sha512-8E3KZoPoZCD+1dgfqhPbejQBnQfBXe8FuwL4z/c8sTrgeDMFEnoyTlH3obB4/fV+6Sg0a0XF+L/6xS4Xx1fUEg==" crossorigin="anonymous"></script>
+
    <script
−
        <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/debug.addIndicators.js" integrity="sha512-mq6TSOBEH8eoYFBvyDQOQf63xgTeAk7ps+MHGLWZ6Byz0BqQzrP+3GIgYL+KvLaWgpL8XgDVbIRYQeLa3Vqu6A==" crossorigin="anonymous"></script>
+
      src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js"
−
        <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.min.js" integrity="sha512-5/OHwmQzDSBS0Ous4/hlYoWLHd06/d2r7LdKZQVBXOA6PvOqWVXtdboiLTU7lQTGyVoKVTNkwi0ol4gHGlw5ww==" crossorigin="anonymous"></script>
+
      integrity="sha512-8E3KZoPoZCD+1dgfqhPbejQBnQfBXe8FuwL4z/c8sTrgeDMFEnoyTlH3obB4/fV+6Sg0a0XF+L/6xS4Xx1fUEg=="
−
        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js" integrity="sha512-/8phkpsAzxsbuX18zNkQ2gCq4Q5JsWoPo1jHLDeZorPUHRtx9YJxpdk+os05oDhPJVCNzA2/NMl4rmJyQ+6Fvg==" crossorigin="anonymous"></script>
+
      crossorigin="anonymous"
−
        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TimelineLite.min.js" integrity="sha512-I0VFyPo7hdM7YrEbQ0pvX4bX2904k0+B19u/xBrPrQoMprfcSnIDfGFD8kP52GbAhwtDjkEVhXlQvj8+vkJyew==" crossorigin="anonymous"></script>
+
    ></script>
−
        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js" integrity="sha512-ht40uOoiTef4nKq0THVzjIGh3VS108J577LVVgNXnQLXza3doXjoM3owin2vd+Hm6w88k12RIrePIVY2WNzz6Q==" crossorigin="anonymous"></script>
+
    <script
−
        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/BezierPlugin.min.js" integrity="sha512-oOy5+mtZRcqjn6b9k4oj+tk2/hVIetzOAM9Y5cndEHgLxiIGavAz1agbHf6JjGzxXZ2SMbu08Uy1DDF0UwA0qQ==" crossorigin="anonymous"></script>
+
      src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/debug.addIndicators.js"
−
        <script>
+
      integrity="sha512-mq6TSOBEH8eoYFBvyDQOQf63xgTeAk7ps+MHGLWZ6Byz0BqQzrP+3GIgYL+KvLaWgpL8XgDVbIRYQeLa3Vqu6A=="
−
            const flightPath1 = {
+
      crossorigin="anonymous"
−
                curviness: 0.2,
+
    ></script>
−
                autoRotate: false,
+
    <script
−
                values: [{
+
      src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.min.js"
−
                    x: 0,
+
      integrity="sha512-5/OHwmQzDSBS0Ous4/hlYoWLHd06/d2r7LdKZQVBXOA6PvOqWVXtdboiLTU7lQTGyVoKVTNkwi0ol4gHGlw5ww=="
−
                    y: 200,
+
      crossorigin="anonymous"
−
                }, {
+
    ></script>
−
                    x: -600,
+
    <script
−
                    y: 200,
+
      src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"
−
                }, {
+
      integrity="sha512-/8phkpsAzxsbuX18zNkQ2gCq4Q5JsWoPo1jHLDeZorPUHRtx9YJxpdk+os05oDhPJVCNzA2/NMl4rmJyQ+6Fvg=="
−
                    x: -600,
+
      crossorigin="anonymous"
−
                    y: 400,
+
    ></script>
−
                }, {
+
    <script
−
                    x: 200,
+
      src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TimelineLite.min.js"
−
                    y: 400,
+
      integrity="sha512-I0VFyPo7hdM7YrEbQ0pvX4bX2904k0+B19u/xBrPrQoMprfcSnIDfGFD8kP52GbAhwtDjkEVhXlQvj8+vkJyew=="
−
                }, {
+
      crossorigin="anonymous"
−
                    x: 200,
+
    ></script>
−
                    y: 650,
+
    <script
−
                }, {
+
      src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"
−
                    x: -500,
+
      integrity="sha512-ht40uOoiTef4nKq0THVzjIGh3VS108J577LVVgNXnQLXza3doXjoM3owin2vd+Hm6w88k12RIrePIVY2WNzz6Q=="
−
                    y: 650,
+
      crossorigin="anonymous"
−
                }, {
+
    ></script>
−
                    x: -500,
+
    <script
−
                    y: window.innerHeight,
+
      src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/BezierPlugin.min.js"
−
                }, ],
+
      integrity="sha512-oOy5+mtZRcqjn6b9k4oj+tk2/hVIetzOAM9Y5cndEHgLxiIGavAz1agbHf6JjGzxXZ2SMbu08Uy1DDF0UwA0qQ=="
−
            };
+
      crossorigin="anonymous"
 +
    ></script>
 +
    <script>
 +
      const dropPath1 = {
 +
        curviness: 0.2,
 +
        autoRotate: false,
 +
        values: [
 +
          {
 +
            x: 0,
 +
            y: 305,
 +
          },
 +
          {
 +
            x: -810,
 +
            y: 315,
 +
          },
 +
          {
 +
            x: -810,
 +
            y: 800,
 +
          },
 +
          {
 +
            x: 200,
 +
            y: window.innerHeight,
 +
          },
 +
        ],
 +
      };
  
−
            const flightPath2 = {
+
      const dropPath2 = {
−
                curviness: 0.2,
+
        curviness: 0.2,
−
                autoRotate: true,
+
        autoRotate: false,
−
                values: [{
+
        values: [
−
                    x: 0,
+
          {
−
                    y: 200,
+
            x: 0,
−
                }, {
+
            y: 350,
−
                    x: 600,
+
          },
−
                    y: 200,
+
          {
−
                }, {
+
            x: 700,
−
                    x: 600,
+
            y: 360,
−
                    y: 420,
+
          },
−
                }, {
+
          {
−
                    x: -100,
+
            x: 700,
−
                    y: 420,
+
            y: window.innerHeight,
−
                }, {
+
          },
−
                    x: -100,
+
        ],
−
                    y: window.innerHeight,
+
      };
−
                }, ],
+
−
            };
+
  
−
            const tween1 = new TimelineLite();
+
      const dropPath3 = {
 +
        curviness: 0.2,
 +
        autoRotate: false,
 +
        values: [
 +
          {
 +
            x: 0,
 +
            y: 285,
 +
          },
 +
          {
 +
            x: -850,
 +
            y: 285,
 +
          },
 +
          {
 +
            x: -850,
 +
            y: 510,
 +
          },
 +
        ],
 +
      };
  
−
            tween1.add(
+
      const tween1 = new TimelineLite();
−
                TweenLite.to(".paper_1", 5, {
+
−
                    bezier: flightPath1,
+
−
                    ease: Power1.easeInOut,
+
−
                })
+
−
            );
+
  
−
            const tween2 = new TimelineLite();
+
      tween1.add(
 +
        TweenLite.to(".drop_1", 5, {
 +
          bezier: dropPath1,
 +
          ease: Power1.easeInOut,
 +
        })
 +
      );
  
−
            tween2.add(
+
      const tween2 = new TimelineLite();
−
                TweenLite.to(".paper_2", 5, {
+
−
                    bezier: flightPath2,
+
−
                    ease: Power1.easeInOut,
+
−
                })
+
−
            );
+
  
−
            const controller = new ScrollMagic.Controller();
+
      tween2.add(
 +
        TweenLite.to(".drop_2", 5, {
 +
          bezier: dropPath2,
 +
          ease: Power1.easeInOut,
 +
        })
 +
      );
  
−
            const scene1 = new ScrollMagic.Scene({
+
      const tween3 = new TimelineLite();
−
                    triggerElement: ".animation_1",
+
−
                    duration: 1000,
+
−
                    triggerHook: 0,
+
−
                })
+
−
                .setTween(tween1)
+
−
                .setPin(".animation_1")
+
−
                .addTo(controller);
+
  
−
            const scene2 = new ScrollMagic.Scene({
+
      tween3.add(
−
                    triggerElement: ".animation_2",
+
        TweenLite.to(".drop_3", 5, {
−
                    duration: 1000,
+
          bezier: dropPath3,
−
                    triggerHook: 0,
+
          ease: Power1.easeInOut,
−
                })
+
        })
−
                .setTween(tween2)
+
      );
−
                .setPin(".animation_2")
+
 
−
                .addTo(controller);
+
      const controller = new ScrollMagic.Controller();
−
         </script>
+
 
−
    </section>
+
      const scene1 = new ScrollMagic.Scene({
−
</body>
+
        triggerElement: ".animation_1",
 +
        duration: 1000,
 +
        triggerHook: 0,
 +
      })
 +
        .setTween(tween1)
 +
        .setPin(".animation_1")
 +
        .addTo(controller);
 +
 
 +
      const scene2 = new ScrollMagic.Scene({
 +
        triggerElement: ".animation_2",
 +
        duration: 1000,
 +
        triggerHook: 0,
 +
      })
 +
        .setTween(tween2)
 +
        .setPin(".animation_2")
 +
        .addTo(controller);
 +
 
 +
      const scene3 = new ScrollMagic.Scene({
 +
         triggerElement: ".animation_3",
 +
        duration: 1000,
 +
        triggerHook: 0,
 +
      })
 +
        .setTween(tween3)
 +
        .setPin(".animation_3")
 +
        .addTo(controller);
 +
 
 +
      const datos = new ScrollMagic.Scene({
 +
        triggerElement: ".animation_1",
 +
      })
 +
        .setClassToggle(".datos", "show")
 +
        .addTo(controller);
 +
 
 +
      const problematica = new ScrollMagic.Scene({
 +
        triggerElement: ".animation_1",
 +
      })
 +
        .setClassToggle(".problematica", "show")
 +
        .addTo(controller);
 +
 
 +
      const deteccion = new ScrollMagic.Scene({
 +
        triggerElement: ".animation_2",
 +
      })
 +
        .setClassToggle(".deteccion", "show")
 +
        .addTo(controller);
 +
 
 +
      const remocion = new ScrollMagic.Scene({
 +
        triggerElement: ".animation_2",
 +
      })
 +
        .setClassToggle(".remocion", "show")
 +
        .addTo(controller);
 +
 
 +
      const resultados = new ScrollMagic.Scene({
 +
        triggerElement: ".animation_3",
 +
      })
 +
        .setClassToggle(".resultados", "show")
 +
        .addTo(controller);
  
 +
      const impacto = new ScrollMagic.Scene({
 +
        triggerElement: ".animation_3",
 +
      })
 +
        .setClassToggle(".impacto", "show")
 +
        .addTo(controller);
 +
    </script>
 +
  </body>
 
</html>
 
</html>
 +
{{TecCEM/Footer}}

Latest revision as of 20:11, 21 October 2021

Document

Inicio

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”.