Difference between revisions of "Team:NPU-China"

 
(166 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
{{MIT}}
+
{{NPU-China/mmp}}
−
<html lang='en'>
+
<html lang="en">
  
−
    <head>      
+
<head>
−
        <link href="https://fonts.googleapis.com/css?family=Lato:100,300,300i,400" rel="stylesheet">
+
     <!-- Bootstrap Core CSS -->
−
        <link href="https://fonts.googleapis.com/css?family=Courgette" rel="stylesheet">
+
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
−
        <title>MIT iGEM 2017</title>
+
−
       
+
−
     </head>
+
−
   
+
−
    <body>
+
−
        <header>
+
−
            <nav>
+
−
                <div class="row">
+
−
                    <img src="https://static.igem.org/mediawiki/2017/9/9c/MIT-Logo.jpg" alt="iGEM logo" class="logo">
+
−
                    <ul class="main-nav nav-text">
+
−
                        <li><a href="https://2017.igem.org/Team:MIT">Home</a></li>
+
−
                        <li><a href="https://2017.igem.org/Team:MIT/team">About Us</a></li>
+
−
                        <li><a href="https://2017.igem.org/Team:MIT/project">Project</a></li>
+
−
                        <li><a href="https://2017.igem.org/Team:MIT/parts">Construct Design</a></li>
+
−
                        <li><a href="#">Lab Work</a></li>
+
−
                        <li><a href="https://2017.igem.org/Team:MIT/model">Modelling</a></li>
+
−
                        <li><a href="https://2017.igem.org/Team:MIT/hp">Human Practices</a></li>
+
−
                    </ul>
+
−
                </div>
+
−
            </nav>
+
−
            <div class="hero-text-box">
+
−
            <h1>Artificial Control of <br> Alternative Splicing</h1>
+
−
            <a class = "btn btn-full" href="#">Background</a>
+
−
            <a class = "btn btn-ghost" href="#">Show me how</a>
+
−
           
+
−
            </div>
+
−
        </header>
+
  
−
        <section class="introduction">
+
    <!-- Custom CSS -->
−
            <div class="row">
+
    <link href="https://2017.igem.org/Template:NPU-China/css?action=raw&ctype=text/css" rel="stylesheet">
−
                <h2>What is Alternative splicing?</h2>
+
−
            </div>
+
−
            <div class="row">
+
−
                <p>Alternative splicing is a process that takes mRNA transcripts and modifies it in various ways to create a final mature mRNA molecule for translation. Some sequences known as introns are removed; other sequences known as exons remain to be translated. With such a process, a single gene can result in many types of proteins transcripts<br>
+
−
                    <br>
+
−
                Our iGEM projects seeks to control alternative splicing of RNA,  specifically exon skipping and inclusion, using a protein called Cas13a. This is a protein that attaches to RNA via a complementary guide RNA, then cuts the RNA strand. For our purposes, we're using a modified version of this protein, known as dCas13a, that can attach, but doesn't cut. By targeting certain portions of a fluorescent protein construct,  we can determine whether or not we achieved the intended isoforms based on the presence or absence of the fluorescent protein in addition to sequencing.
+
−
                </p>
+
−
            </div>
+
−
       
+
−
        </section>
+
−
   
+
−
   
+
−
 
+
  
−
       
+
     <!-- Custom Fonts -->
−
       
+
     <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
−
   
+
−
      
+
−
     </body>  
+
  
 +
    <!-- jQuery -->
 +
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  
−
<style>
+
    <!-- Bootstrap Core JavaScript -->
−
/* ==================================================
+
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
−
  BASIC SETUP
+
  
 +
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
 +
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
 +
    <!--[if lt IE 9]>
 +
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
 +
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
 +
    <![endif]-->
 +
    <style>
 +
    </style>
 +
</head>
  
  
−
*/
+
<body>
  
−
/* ==================================================
+
    <!-- Navigation -->
−
  BASIC SETUP
+
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
 +
        <div class="container">
 +
            <div class="navbar-header">
 +
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
 +
                <a class="navbar-brand" href="https://2017.igem.org/Team:NPU-China">
 +
                  <img src="https://static.igem.org/mediawiki/2017/2/29/NPU-logo.png" style="max-width:50px;margin-top:-10px;">
 +
                </a>
 +
            </div>
 +
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 +
                <ul class="nav navbar-nav navbar-right">
 +
                    <li class="active"> <a href="https://2017.igem.org/Team:NPU-China">Home</a> </li>
 +
                    <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Team<b class="caret"></b></a>
 +
                        <ul class="dropdown-menu">
 +
                            <li> <a href="https://2017.igem.org/Team:NPU-China/Aboutus">About us</a> </li>
 +
                            <li> <a href="https://2017.igem.org/Team:NPU-China/Attributions">Attributions</a> </li>
 +
                        </ul>
 +
                    </li>
 +
                    <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Project<b class="caret"></b></a>
 +
                        <ul class="dropdown-menu">
 +
                            <li> <a href="https://2017.igem.org/Team:NPU-China/Background">Background</a> </li>
 +
                            <li> <a href="https://2017.igem.org/Team:NPU-China/Description">Description</a> </li>
 +
                            <li> <a href="https://2017.igem.org/Team:NPU-China/Design">Design</a> </li>
 +
                            <li> <a href="https://2017.igem.org/Team:NPU-China/Model">Model</a> </li>
 +
                            <li> <a href="https://2017.igem.org/Team:NPU-China/Proofofconcept">Proof of concept</a> </li>
 +
                            <li> <a href="https://2017.igem.org/Team:NPU-China/Demonstrate">Demonstrate</a> </li>
 +
                        </ul>
 +
                    </li>
 +
                    <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Parts<b class="caret"></b></a>
 +
                        <ul class="dropdown-menu">
 +
                            <li> <a href="https://2017.igem.org/Team:NPU-China/BasicParts">Basic Parts</a> </li>
 +
                            <li> <a href="https://2017.igem.org/Team:NPU-China/CompositeParts">Composite Parts</a> </li>
 +
                        </ul>
 +
                    </li>
 +
                    <li> <a href="https://2017.igem.org/Team:NPU-China/Hardware">Hardware</a> </li>
 +
                    <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">HP<b class="caret"></b></a>
 +
                        <ul class="dropdown-menu">
 +
                            <li> <a href="https://2017.igem.org/Team:NPU-China/HP/Silver">Silver</a> </li>
 +
                            <li> <a href="https://2017.igem.org/Team:NPU-China/HP/Gold_Integrated">Gold</a> </li>
 +
                        </ul>
 +
                    </li>
 +
                    <li> <a href="https://2017.igem.org/Team:NPU-China/Collaborations">Collaborations</a> </li>
 +
                    <li> <a href="https://2017.igem.org/Team:NPU-China/Achievements">Achievements</a> </li>
 +
                    <li> <a href="https://2017.igem.org/Team:NPU-China/InterLab">InterLab</a> </li>
  
 +
                    <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Notebook<b class="caret"></b></a>
 +
                        <ul class="dropdown-menu">
 +
                            <li> <a href="https://2017.igem.org/Team:NPU-China/Labnotes">Labnotes</a> </li>
 +
                            <li> <a href="https://2017.igem.org/Team:NPU-China/Protocols">Protocols</a> </li>
 +
                        </ul>
 +
                    </li>
 +
                </ul>
 +
            </div>
 +
        </div>
 +
    </nav>
  
 +
    <!-- Header Carousel -->
 +
    <header id="myCarousel" class="carousel slide">
 +
        <!-- Indicators -->
 +
        <div class="carousel-indicators">
 +
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
 +
            <li data-target="#myCarousel" data-slide-to="1"></li>
 +
            <li data-target="#myCarousel" data-slide-to="2"></li>
 +
        </div>
  
−
*/
+
        <!-- Wrapper for slides -->
 +
        <div class="carousel-inner">
 +
            <div class="item active">
 +
                <img src="https://static.igem.org/mediawiki/2017/1/1f/Npu-banner1.jpg">
  
 +
            </div>
 +
            <div class="item">
 +
                <img src="https://static.igem.org/mediawiki/2017/0/06/Npu-banner3.jpg">
 +
            </div>
 +
            <div class="item">
 +
                <img src="https://static.igem.org/mediawiki/2017/2/28/Npu-banner2.jpg">
 +
            </div>
 +
        </div>
 +
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
 +
            <span class="icon-prev"></span>
 +
        </a>
 +
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
 +
            <span class="icon-next"></span>
 +
        </a>
 +
        <!-- Controls -->
 +
    </header>
  
−
*{
+
     <div class="batu" style="background: url('https://static.igem.org/mediawiki/2017/f/fe/Npu-background.png') no-repeat fixed; overflow: hidden;">
−
     margin: 0;
+
        <!-- Page Content -->
−
    padding: 0;
+
        <div class="container">
−
    box-sizing: border-box;
+
−
   
+
−
}
+
  
−
html {
+
            <div class="row" style=" padding-top:70px">
−
    background-color: #fff;
+
                <div class="col-md-12">
−
    color: #555;
+
                    <h2 class="page-header" align="center" >Abstract</h2>
−
    font-family: 'Lato', 'Arial', sans-serif;
+
                    <h4>Acrylic acid is a bulk chemical raw material, which is widely used in many fields because of its excellent
−
    font-weight: 300;
+
                        polymerization capacity, such as paint, glue, and even mobile phone screen protective film. The average
−
    font-size: 20px;
+
                        annual market demand of acrylic acid is up to 8 million tons, and the market value is nearly 10 billion
−
    text-rendering: optimizeLegibility;
+
                        US dollars, which shows a promising market prospect. At present, acrylic acid is made from propylene (which
−
}
+
                        is obtained by petroleum cracking) after multi-step treatment, resulting in environmental pollution,
 +
                        high energy consumption and a lack of sustainablility.<br><br> This year, we aim to use a greener and more environmentally-
 +
                        friendly carbon source, glycerol, to achieve all green production of acrylic acid. Compared to traditional
 +
                        chemical synthesis methods, Synbio is relatively greener and more sustainable. Also, glycerol costs less than propene.
 +
                    </h4>
 +
                 
 +
                </div>
 +
            </div>
 +
       
 +
            <!-- Marketing Icons Section -->
 +
            <div class="row" style="padding-top:70px">
 +
                <div class="col-md-12">
 +
                    <h2 class="page-header" align="center">We constructed our cell factory based on 4 levels, which are—</h2>
 +
                    <br>
 +
                </div>
 +
            </div>
  
  
−
.row{
 
−
    max-width: 1140px;
 
−
    margin: 0 auto;
 
−
}
 
  
−
.nav-text{
 
−
    color: #fff;
 
−
}
 
  
 +
            <div class="row">
 +
                <div class="col-md-6 img-portfolio">
 +
                    <a href="https://2017.igem.org/Team:NPU-China/Design#COREPART">
 +
                        <img class="img-responsive img-hover" src="https://static.igem.org/mediawiki/2017/a/ac/Ceas2.png">
 +
                    </a>
 +
                    <h3 align="center">
 +
                        <a href="https://2017.igem.org/Team:NPU-China/Design#COREPART">Core Part</a>
 +
                    </h3>
 +
                    <h4>We use ceaS2 enzyme as the core part, but acrylic acid is a by-product of ceaS2 enzyme, whose catalytic effect of wild type
 +
                        is very weak with acrylic acid production only 1mg/L. Hence, we hope to improve the catalytic
 +
                        effect of ceaS2 enzyme.<br><br> We designed ceaS2 enzyme mutants via the AEMD(Auto Enzyme Mutation Design)
 +
                        platform and screened for ceaS2 mutants that own better acrylic acid yield by HPLC(High Performance Liquid Chromatography)
 +
                        and HTS(High throughput screening).
 +
                    </h4>
 +
                </div>
 +
                <div class="col-md-6 img-portfolio">
 +
                    <a href="https://2017.igem.org/Team:NPU-China/Design#SYSTEM">
 +
                        <img class="img-responsive img-hover" src="https://static.igem.org/mediawiki/2017/8/85/System.png" alt="">
 +
                    </a>
 +
                    <h3 align="center">
 +
                        <a href="https://2017.igem.org/Team:NPU-China/Design#SYSTEM">System</a>
 +
                    </h3>
 +
                    <h4>Respectively, E. coli and S. cerevisiae are the two sorts of model organisms that are most convenient
 +
                        to operate in the prokaryote and eukaryote. Therefore, in terms of our choice of the chassis organisms,
 +
                        we have E. coli MG1655 and S. cerevisiae BY4741 tested individually.
 +
                    </h4>
 +
                </div>
 +
            </div>
 +
            <!-- /.row -->
  
 +
            <!-- Projects Row -->
 +
            <div class="row"  style="padding-top:50px">
 +
                <div class="col-md-6 img-portfolio">
 +
                    <a href="https://2017.igem.org/Team:NPU-China/Design#PATHWAY">
 +
                        <img class="img-responsive img-hover" src="https://static.igem.org/mediawiki/2017/e/ec/Pathway.png" alt="">
 +
                    </a>
 +
                    <h3 align="center">
 +
                        <a href="https://2017.igem.org/Team:NPU-China/Design#PATHWAY">Pathway</a>
 +
                    </h3>
 +
                    <h4>We need to design two different metabolic pathways for two different chassis organisms and propose different
 +
                        optimization schemes. We introduced the ceaS2 enzyme exogenously on the basis of the glycerol
 +
                        metabolism of the two organisms, so that they could produce the target product acrylic acid using the
 +
                        intermediates G3P and DHAP.<br><br> Besides the construction of the pathways, we also reconstructed
 +
                        and optimized the original metabolic pathway to increase the carbon flux rate of the designed pathway
 +
                        and reduced the loss of by-pass carbon flux.</h4>
 +
                </div>
 +
                <div class="col-md-6 img-portfolio">
 +
                    <a href="https://2017.igem.org/Team:NPU-China/Design#PRODUCTION">
 +
                        <img class="img-responsive img-hover" src="https://static.igem.org/mediawiki/2017/6/67/Production2.png" alt="">
 +
                    </a>
 +
                    <h3 align="center">
 +
                        <a href="https://2017.igem.org/Team:NPU-China/Design#PRODUCTION" >Production</a>
 +
                    </h3>
 +
                    <h4>All of the previous processes were applied in building the engineered microorganism strains which have a high production of acrylic
 +
                        acid. In the subsequent fermentation, we also determined the best conditions
 +
                        of the engineered microorganism strains.<br><br> Therefore, we selected to control the carbon source, buffer, temperature, pH
 +
                        and other conditions to optimize the cell production process.</h4>
 +
                </div>
 +
            </div>
 +
        </div>
 +
        <!-- /.container -->
 +
        <img src="https://static.igem.org/mediawiki/2017/0/0c/Jz.png" class="img-responsive">
  
−
h1,
+
     </div>
−
h2,
+
     <!-- /.batu -->
−
h3{
+
−
      
+
−
    font-weight: 300;
+
−
    text-transform:uppercase;
+
−
   
+
−
   
+
−
   
+
−
}
+
−
 
+
−
 
+
−
h1{
+
−
    margin-top: 0;
+
−
    margin-bottom: 20px;
+
−
    margin: 0;
+
−
    color: #fff;
+
−
    font-size: 240%;
+
−
    word-spacing: 4px;
+
−
    letter-spacing: 1px;
+
−
}
+
−
 
+
−
h2{
+
−
    font-size: 180%;
+
−
    word-spacing: 2px;
+
−
    text-align: center;
+
−
    margin-bottom: 30px;
+
−
    letter-spacing: 1px;
+
−
}
+
−
 
+
−
h3{
+
−
    font-size: 110%;
+
−
    margin-bottom: 15px;
+
−
}
+
−
 
+
−
h2:after{
+
−
    display: block;
+
−
    height: 2px;
+
−
    background-color: #2980b9;
+
−
    content: " ";
+
−
    width: 100px;
+
−
    margin: 0 auto;
+
−
    margin-top: 30px;
+
−
}
+
−
 
+
−
 
+
−
/* ------------BUTTONS-----------*/
+
−
.btn:link,
+
−
.btn:visited{
+
−
     display: inline-block;
+
−
    padding: 10px 30px;
+
−
    font-weight: 300;
+
−
    text-decoration: none;
+
−
    border-radius: 200px;
+
−
    transition: background-color 0.2s, border 0.2s, color 0.2s;
+
−
}
+
−
 
+
−
 
+
−
.btn-full:link,
+
−
.btn-full:visited{
+
−
    background-color: #2980b9;
+
−
    border: 1px solid #2980b9;
+
−
    color: #fff;
+
−
    margin-right: 15px;
+
−
}
+
−
 
+
−
.btn-ghost:link,
+
−
.btn-ghost:visited{
+
−
    border: 1px solid #2980b9;
+
−
    color: #2980b9;
+
−
}
+
−
 
+
−
 
+
−
.btn:hover,
+
−
.btn:active{
+
−
    background-color: #236d9d;
+
−
}
+
−
 
+
−
 
+
−
.btn-full:hover,
+
−
.btn-full:active{
+
−
    border: 1px solid #236d9d;
+
−
 
+
−
}
+
−
 
+
−
.btn-ghost:hover,
+
−
.btn-ghost:active{
+
−
    border: 1px solid #2980b9;
+
−
    color: #fff;
+
−
}
+
−
 
+
−
 
+
−
/* ================================================== */
+
−
/* =========header=========*/
+
−
 
+
−
header {
+
−
    background-image: linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.7)),url(https://static.igem.org/mediawiki/2017/f/fe/Puzzle.jpg);
+
−
    background-size: cover;
+
−
    background-position: center;
+
−
    height: 100vh;
+
−
    background-attachment: fixed;
+
−
}
+
−
 
+
−
.hero-text-box{
+
−
    position: absolute;
+
−
    width: 1140px;
+
−
    top: 50%;
+
−
    left: 50%;
+
−
    transform: translate(-50%,-50%);
+
−
}
+
−
 
+
−
.hero-text-box h1{
+
−
    margin-bottom: 20px;
+
−
}
+
−
 
+
−
.logo{
+
−
    height: 100px;
+
−
    width:auto;
+
−
    float: left;
+
−
    margin-top: 20px;
+
−
    background-color: #000;
+
−
    border-radius: 30px;
+
−
   
+
−
}
+
−
 
+
−
.main-nav{
+
−
    float:right;
+
−
    list-style: none;
+
−
    margin-top: 55px;
+
−
}
+
−
 
+
−
.main-nav li{
+
−
    display: inline-block;
+
−
    margin-left: 40px;
+
−
}
+
−
 
+
−
.main-nav li a:link,
+
−
.main-nav li a:visited{
+
−
    padding: 8px 0;
+
−
    color: #fff;
+
−
    text-decoration: none;
+
−
    text-transform: uppercase;
+
−
    font-size: 90%;
+
−
    border-bottom: 2px solid transparent;
+
−
    transition: border-bottom 0.2s;
+
−
}
+
−
 
+
−
 
+
−
.main-nav li a:hover,
+
−
.main-nav li a:active{
+
−
    border-bottom: 2px solid #2980b9;
+
−
}
+
−
 
+
−
 
+
−
/*      Section Introduction    */
+
−
/*      Section Introduction    */
+
−
/*      Section Introduction    */
+
−
.introduction{
+
−
    margin-top: 90px;
+
−
    margin-bottom: 150px;
+
−
}
+
−
 
+
−
.introduction p{
+
−
    font-size: 120%;
+
−
    line-height: 150%;
+
−
    margin-top: 15px;
+
−
    font-family: 'Courgette', cursive;
+
−
}
+
−
 
+
−
 
+
−
 
+
−
/*      Section Quotes  */
+
−
/*      Section Quotes  */
+
−
/*      Section Quotes  */
+
−
.section-quotes{
+
−
    background-image: linear-gradient(rgba(0, 0, 0, 0.6),rgba(0, 0, 0, 0.6)),url(img/capsule.jpg);
+
−
    margin-top: 70px;
+
−
    margin-bottom: 80px;
+
−
    color: #fff;
+
−
    background-attachment: fixed;
+
−
}
+
−
 
+
−
.section-quotes h2{
+
−
    margin-top: 70px;
+
−
}
+
−
 
+
−
cite{
+
−
    font-size: 90%;
+
−
    margin-top: 25px;
+
−
    display: block;
+
−
    margin-bottom: 70px;
+
−
}
+
−
 
+
−
cite img{
+
−
    height: 45px;
+
−
    border-radius: 200%;
+
−
    margin-right: 10px;
+
−
    vertical-align: middle;
+
−
   
+
−
}
+
−
 
+
−
blockquote{
+
−
    padding: 2%;
+
−
    font-style: italic;
+
−
    line-height: 145%;
+
−
    position: relative;
+
−
    margin-top: 40px;
+
−
}
+
−
 
+
−
blockquote:before{
+
−
    content: "\201c";
+
−
    font-size: 400%;
+
−
    display: block;
+
−
    position: absolute;
+
−
    top: -5px;
+
−
    left: -3px;
+
−
}
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
/*  SECTIONS  ============================================================================= */
+
−
 
+
−
.section {
+
−
clear: both;
+
−
padding: 0px;
+
−
margin: 0px;
+
−
}
+
−
 
+
−
/*  GROUPING  ============================================================================= */
+
−
 
+
−
.row {
+
−
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+
−
}
+
−
 
+
−
.row:before,
+
−
.row:after {
+
−
    content:"";
+
−
    display:table;
+
−
}
+
−
.row:after {
+
−
    clear:both;
+
−
}
+
−
 
+
−
/*  GRID COLUMN SETUP  ==================================================================== */
+
−
 
+
−
.col {
+
−
display: block;
+
−
float:left;
+
−
margin: 1% 0 1% 1.6%;
+
−
}
+
−
 
+
−
.col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */
+
−
 
+
−
 
+
−
/*  REMOVE MARGINS AS ALL GO FULL WIDTH AT 480 PIXELS */
+
−
 
+
−
@media only screen and (max-width: 480px) {
+
−
.col {
+
−
/*margin: 1% 0 1% 0%;*/
+
−
        margin: 0;
+
−
}
+
−
}
+
−
 
+
−
 
+
−
/*  GRID OF TWO  ============================================================================= */
+
−
 
+
−
 
+
−
.span-2-of-2 {
+
−
width: 100%;
+
−
}
+
−
 
+
−
.span-1-of-2 {
+
−
width: 49.2%;
+
−
}
+
−
 
+
−
/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
+
−
 
+
−
@media only screen and (max-width: 480px) {
+
−
.span-2-of-2 {
+
−
width: 100%;
+
−
}
+
−
.span-1-of-2 {
+
−
width: 100%;
+
−
}
+
−
}
+
−
 
+
−
 
+
−
/*  GRID OF THREE  ============================================================================= */
+
−
 
+
−
+
−
.span-3-of-3 {
+
−
width: 100%;
+
−
}
+
−
 
+
−
.span-2-of-3 {
+
−
width: 66.13%;
+
−
}
+
−
 
+
−
.span-1-of-3 {
+
−
width: 32.26%;
+
−
}
+
−
 
+
−
 
+
−
/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
+
−
 
+
−
@media only screen and (max-width: 480px) {
+
−
.span-3-of-3 {
+
−
width: 100%;
+
−
}
+
−
.span-2-of-3 {
+
−
width: 100%;
+
−
}
+
−
.span-1-of-3 {
+
−
width: 100%;
+
−
}
+
−
}
+
−
 
+
−
/*  GRID OF FOUR  ============================================================================= */
+
−
 
+
−
+
−
.span-4-of-4 {
+
−
width: 100%;
+
−
}
+
−
 
+
−
.span-3-of-4 {
+
−
width: 74.6%;
+
−
}
+
−
 
+
−
.span-2-of-4 {
+
−
width: 49.2%;
+
−
}
+
−
 
+
−
.span-1-of-4 {
+
−
width: 23.8%;
+
−
}
+
−
 
+
−
 
+
−
/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
+
−
 
+
−
@media only screen and (max-width: 480px) {
+
−
.span-4-of-4 {
+
−
width: 100%;
+
−
}
+
−
.span-3-of-4 {
+
−
width: 100%;
+
−
}
+
−
.span-2-of-4 {
+
−
width: 100%;
+
−
}
+
−
.span-1-of-4 {
+
−
width: 100%;
+
−
}
+
−
}
+
−
 
+
−
 
+
−
/*  GRID OF FIVE  ============================================================================= */
+
−
 
+
−
+
−
.span-5-of-5 {
+
−
width: 100%;
+
−
}
+
−
 
+
−
.span-4-of-5 {
+
−
  width: 79.68%;
+
−
}
+
−
 
+
−
.span-3-of-5 {
+
−
  width: 59.36%;
+
−
}
+
−
 
+
−
.span-2-of-5 {
+
−
  width: 39.04%;
+
−
}
+
−
 
+
−
.span-1-of-5 {
+
−
  width: 18.72%;
+
−
}
+
−
 
+
−
 
+
−
/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
+
−
 
+
−
@media only screen and (max-width: 480px) {
+
−
.span-5-of-5 {
+
−
width: 100%;
+
−
}
+
−
.span-4-of-5 {
+
−
width: 100%;
+
−
}
+
−
.span-3-of-5 {
+
−
width: 100%;
+
−
}
+
−
.span-2-of-5 {
+
−
width: 100%;
+
−
}
+
−
.span-1-of-5 {
+
−
width: 100%;
+
−
}
+
−
}
+
−
 
+
−
 
+
−
/*  GRID OF SIX  ============================================================================= */
+
−
 
+
−
 
+
−
.span-6-of-6 {
+
−
width: 100%;
+
−
}
+
−
 
+
−
.span-5-of-6 {
+
−
  width: 83.06%;
+
−
}
+
−
 
+
−
.span-4-of-6 {
+
−
  width: 66.13%;
+
−
}
+
−
 
+
−
.span-3-of-6 {
+
−
  width: 49.2%;
+
−
}
+
−
 
+
−
.span-2-of-6 {
+
−
  width: 32.26%;
+
−
}
+
−
 
+
−
.span-1-of-6 {
+
−
  width: 15.33%;
+
−
}
+
−
 
+
−
 
+
−
/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
+
−
 
+
−
@media only screen and (max-width: 480px) {
+
−
.span-6-of-6 {
+
−
width: 100%;
+
−
}
+
−
.span-5-of-6 {
+
−
width: 100%;
+
−
}
+
−
.span-4-of-6 {
+
−
width: 100%;
+
−
}
+
−
.span-3-of-6 {
+
−
width: 100%;
+
−
}
+
−
.span-2-of-6 {
+
−
width: 100%;
+
−
}
+
−
.span-1-of-6 {
+
−
width: 100%;
+
−
}
+
−
}
+
−
 
+
−
 
+
−
 
+
−
/*  GRID OF SEVEN  ============================================================================= */
+
−
 
+
−
 
+
−
.span-7-of-7 {
+
−
width: 100%;
+
−
}
+
−
 
+
−
.span-6-of-7 {
+
−
width: 85.48%;
+
−
}
+
−
 
+
−
.span-5-of-7 {
+
−
  width: 70.97%;
+
−
}
+
−
 
+
−
.span-4-of-7 {
+
−
  width: 56.45%;
+
−
}
+
−
 
+
−
.span-3-of-7 {
+
−
  width: 41.94%;
+
−
}
+
−
 
+
−
.span-2-of-7 {
+
−
  width: 27.42%;
+
−
}
+
−
 
+
−
.span-1-of-7 {
+
−
  width: 12.91%;
+
−
}
+
−
 
+
−
 
+
−
/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
+
−
 
+
−
@media only screen and (max-width: 480px) {
+
−
.span-7-of-7 {
+
−
width: 100%;
+
−
}
+
−
.span-6-of-7 {
+
−
width: 100%;
+
−
}
+
−
.span-5-of-7 {
+
−
width: 100%;
+
−
}
+
−
.span-4-of-7 {
+
−
width: 100%;
+
−
}
+
−
.span-3-of-7 {
+
−
width: 100%;
+
−
}
+
−
.span-2-of-7 {
+
−
width: 100%;
+
−
}
+
−
.span-1-of-7 {
+
−
width: 100%;
+
−
}
+
−
}
+
−
 
+
−
 
+
−
/*  GRID OF EIGHT  ============================================================================= */
+
−
 
+
−
+
−
.span-8-of-8 {
+
−
width: 100%;
+
−
}
+
−
 
+
−
.span-7-of-8 {
+
−
width: 87.3%;
+
−
}
+
−
 
+
−
.span-6-of-8 {
+
−
width: 74.6%;
+
−
}
+
−
 
+
−
.span-5-of-8 {
+
−
width: 61.9%;
+
−
}
+
−
 
+
−
.span-4-of-8 {
+
−
width: 49.2%;
+
−
}
+
−
 
+
−
.span-3-of-8 {
+
−
width: 36.5%;
+
−
}
+
−
 
+
−
.span-2-of-8 {
+
−
width: 23.8%;
+
−
}
+
−
 
+
−
.span-1-of-8 {
+
−
width: 11.1%;
+
−
}
+
−
 
+
−
 
+
−
/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
+
−
 
+
−
@media only screen and (max-width: 480px) {
+
−
.span-8-of-8 {
+
−
width: 100%;
+
−
}
+
−
.span-7-of-8 {
+
−
width: 100%;
+
−
}
+
−
.span-6-of-8 {
+
−
width: 100%;
+
−
}
+
−
.span-5-of-8 {
+
−
width: 100%;
+
−
}
+
−
.span-4-of-8 {
+
−
width: 100%;
+
−
}
+
−
.span-3-of-8 {
+
−
width: 100%;
+
−
}
+
−
.span-2-of-8 {
+
−
width: 100%;
+
−
}
+
−
.span-1-of-8 {
+
−
width: 100%;
+
−
}
+
−
}
+
−
 
+
−
 
+
−
/*  GRID OF NINE  ============================================================================= */
+
−
 
+
−
 
+
−
.span-9-of-9 {
+
−
width: 100%;
+
−
}
+
−
 
+
−
.span-8-of-9 {
+
−
width: 88.71%;
+
−
}
+
−
 
+
−
.span-7-of-9 {
+
−
width: 77.42%;
+
−
}
+
−
 
+
−
.span-6-of-9 {
+
−
width: 66.13%;
+
−
}
+
−
 
+
−
.span-5-of-9 {
+
−
width: 54.84%;
+
−
}
+
−
 
+
−
.span-4-of-9 {
+
−
width: 43.55%;
+
−
}
+
−
 
+
−
.span-3-of-9 {
+
−
width: 32.26%;
+
−
}
+
−
 
+
−
.span-2-of-9 {
+
−
width: 20.97%;
+
−
}
+
−
 
+
−
.span-1-of-9 {
+
−
width: 9.68%;
+
−
}
+
−
 
+
−
 
+
−
/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
+
−
 
+
−
@media only screen and (max-width: 480px) {
+
−
.span-9-of-9 {
+
−
width: 100%;
+
−
}
+
−
.span-8-of-9 {
+
−
width: 100%;
+
−
}
+
−
.span-7-of-9 {
+
−
width: 100%;
+
−
}
+
−
.span-6-of-9 {
+
−
width: 100%;
+
−
}
+
−
.span-5-of-9 {
+
−
width: 100%;
+
−
}
+
−
.span-4-of-9 {
+
−
width: 100%;
+
−
}
+
−
.span-3-of-9 {
+
−
width: 100%;
+
−
}
+
−
.span-2-of-9 {
+
−
width: 100%;
+
−
}
+
−
.span-1-of-9 {
+
−
width: 100%;
+
−
}
+
−
}
+
−
 
+
−
 
+
−
/*  GRID OF TEN  ============================================================================= */
+
−
 
+
−
 
+
−
.span-10-of-10 {
+
−
width: 100%;
+
−
}
+
−
 
+
−
.span-9-of-10 {
+
−
width: 89.84%;
+
−
}
+
−
 
+
−
.span-8-of-10 {
+
−
width: 79.68%;
+
−
}
+
−
 
+
−
.span-7-of-10 {
+
−
width: 69.52%;
+
−
}
+
−
 
+
−
.span-6-of-10 {
+
−
width: 59.36%;
+
−
}
+
−
 
+
−
.span-5-of-10 {
+
−
width: 49.2%;
+
−
}
+
−
 
+
−
.span-4-of-10 {
+
−
width: 39.04%;
+
−
}
+
−
 
+
−
.span-3-of-10 {
+
−
width: 28.88%;
+
−
}
+
−
 
+
−
.span-2-of-10 {
+
−
width: 18.72%;
+
−
}
+
−
 
+
−
.span-1-of-10 {
+
−
width: 8.56%;
+
−
}
+
−
 
+
−
 
+
−
/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
+
−
 
+
−
@media only screen and (max-width: 480px) {
+
−
.span-10-of-10 {
+
−
width: 100%;
+
−
}
+
−
.span-9-of-10 {
+
−
width: 100%;
+
−
}
+
−
.span-8-of-10 {
+
−
width: 100%;
+
−
}
+
−
.span-7-of-10 {
+
−
width: 100%;
+
−
}
+
−
.span-6-of-10 {
+
−
width: 100%;
+
−
}
+
−
.span-5-of-10 {
+
−
width: 100%;
+
−
}
+
−
.span-4-of-10 {
+
−
width: 100%;
+
−
}
+
−
.span-3-of-10 {
+
−
width: 100%;
+
−
}
+
−
.span-2-of-10 {
+
−
width: 100%;
+
−
}
+
−
.span-1-of-10 {
+
−
width: 100%;
+
−
}
+
−
}
+
−
 
+
−
 
+
−
/*  GRID OF ELEVEN  ============================================================================= */
+
−
 
+
−
.span-11-of-11 {
+
−
width: 100%;
+
−
}
+
−
 
+
−
.span-10-of-11 {
+
−
width: 90.76%;
+
−
}
+
−
 
+
−
.span-9-of-11 {
+
−
width: 81.52%;
+
−
}
+
−
 
+
−
.span-8-of-11 {
+
−
width: 72.29%;
+
−
}
+
−
 
+
−
.span-7-of-11 {
+
−
width: 63.05%;
+
−
}
+
−
 
+
−
.span-6-of-11 {
+
−
width: 53.81%;
+
−
}
+
−
 
+
−
.span-5-of-11 {
+
−
width: 44.58%;
+
−
}
+
−
 
+
−
.span-4-of-11 {
+
−
width: 35.34%;
+
−
}
+
−
 
+
−
.span-3-of-11 {
+
−
width: 26.1%;
+
−
}
+
−
 
+
−
.span-2-of-11 {
+
−
width: 16.87%;
+
−
}
+
−
 
+
−
.span-1-of-11 {
+
−
width: 7.63%;
+
−
}
+
−
 
+
−
 
+
−
/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
+
−
 
+
−
@media only screen and (max-width: 480px) {
+
−
.span-11-of-11 {
+
−
width: 100%;
+
−
}
+
−
.span-10-of-11 {
+
−
width: 100%;
+
−
}
+
−
.span-9-of-11 {
+
−
width: 100%;
+
−
}
+
−
.span-8-of-11 {
+
−
width: 100%;
+
−
}
+
−
.span-7-of-11 {
+
−
width: 100%;
+
−
}
+
−
.span-6-of-11 {
+
−
width: 100%;
+
−
}
+
−
.span-5-of-11 {
+
−
width: 100%;
+
−
}
+
−
.span-4-of-11 {
+
−
width: 100%;
+
−
}
+
−
.span-3-of-11 {
+
−
width: 100%;
+
−
}
+
−
.span-2-of-11 {
+
−
width: 100%;
+
−
}
+
−
.span-1-of-11 {
+
−
width: 100%;
+
−
}
+
−
}
+
−
 
+
−
 
+
−
/*  GRID OF TWELVE  ============================================================================= */
+
−
 
+
−
.span-12-of-12 {
+
−
width: 100%;
+
−
}
+
−
 
+
−
.span-11-of-12 {
+
−
width: 91.53%;
+
−
}
+
−
 
+
−
.span-10-of-12 {
+
−
width: 83.06%;
+
−
}
+
−
 
+
−
.span-9-of-12 {
+
−
width: 74.6%;
+
−
}
+
−
 
+
−
.span-8-of-12 {
+
−
width: 66.13%;
+
−
}
+
−
 
+
−
.span-7-of-12 {
+
−
width: 57.66%;
+
−
}
+
−
 
+
−
.span-6-of-12 {
+
−
width: 49.2%;
+
−
}
+
−
 
+
−
.span-5-of-12 {
+
−
width: 40.73%;
+
−
}
+
−
 
+
−
.span-4-of-12 {
+
−
width: 32.26%;
+
−
}
+
−
 
+
−
.span-3-of-12 {
+
−
width: 23.8%;
+
−
}
+
−
 
+
−
.span-2-of-12 {
+
−
width: 15.33%;
+
−
}
+
−
 
+
−
.span-1-of-12 {
+
−
width: 6.86%;
+
−
}
+
−
 
+
−
 
+
−
/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
+
−
 
+
−
@media only screen and (max-width: 480px) {
+
−
.span-12-of-12 {
+
−
width: 100%;
+
−
}
+
−
.span-11-of-12 {
+
−
width: 100%;
+
−
}
+
−
.span-10-of-12 {
+
−
width: 100%;
+
−
}
+
−
.span-9-of-12 {
+
−
width: 100%;
+
−
}
+
−
.span-8-of-12 {
+
−
width: 100%;
+
−
}
+
−
.span-7-of-12 {
+
−
width: 100%;
+
−
}
+
−
.span-6-of-12 {
+
−
width: 100%;
+
−
}
+
−
.span-5-of-12 {
+
−
width: 100%;
+
−
}
+
−
.span-4-of-12 {
+
−
width: 100%;
+
−
}
+
−
.span-3-of-12 {
+
−
width: 100%;
+
−
}
+
−
.span-2-of-12 {
+
−
width: 100%;
+
−
}
+
−
.span-1-of-12 {
+
−
width: 100%;
+
−
}
+
−
}
+
−
 
+
−
/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
+
−
 
+
−
/* Document
+
−
  ========================================================================== */
+
−
 
+
−
/**
+
−
* 1. Correct the line height in all browsers.
+
−
* 2. Prevent adjustments of font size after orientation changes in
+
−
*    IE on Windows Phone and in iOS.
+
−
*/
+
−
 
+
−
html {
+
−
  line-height: 1.15; /* 1 */
+
−
  -ms-text-size-adjust: 100%; /* 2 */
+
−
  -webkit-text-size-adjust: 100%; /* 2 */
+
−
}
+
−
 
+
−
/* Sections
+
−
  ========================================================================== */
+
−
 
+
−
/**
+
−
* Remove the margin in all browsers (opinionated).
+
−
*/
+
−
 
+
−
body {
+
−
  margin: 0;
+
−
}
+
−
 
+
−
/**
+
−
* Add the correct display in IE 9-.
+
−
*/
+
−
 
+
−
article,
+
−
aside,
+
−
footer,
+
−
header,
+
−
nav,
+
−
section {
+
−
  display: block;
+
−
}
+
−
 
+
−
/**
+
−
* Correct the font size and margin on `h1` elements within `section` and
+
−
* `article` contexts in Chrome, Firefox, and Safari.
+
−
*/
+
−
 
+
−
h1 {
+
−
  font-size: 2em;
+
−
  margin: 0.67em 0;
+
−
}
+
−
 
+
−
/* Grouping content
+
−
  ========================================================================== */
+
−
 
+
−
/**
+
−
* Add the correct display in IE 9-.
+
−
* 1. Add the correct display in IE.
+
−
*/
+
−
 
+
−
figcaption,
+
−
figure,
+
−
main { /* 1 */
+
−
  display: block;
+
−
}
+
−
 
+
−
/**
+
−
* Add the correct margin in IE 8.
+
−
*/
+
−
 
+
−
figure {
+
−
  margin: 1em 40px;
+
−
}
+
−
 
+
−
/**
+
−
* 1. Add the correct box sizing in Firefox.
+
−
* 2. Show the overflow in Edge and IE.
+
−
*/
+
−
 
+
−
hr {
+
−
  box-sizing: content-box; /* 1 */
+
−
  height: 0; /* 1 */
+
−
  overflow: visible; /* 2 */
+
−
}
+
−
 
+
−
/**
+
−
* 1. Correct the inheritance and scaling of font size in all browsers.
+
−
* 2. Correct the odd `em` font sizing in all browsers.
+
−
*/
+
−
 
+
−
pre {
+
−
  font-family: monospace, monospace; /* 1 */
+
−
  font-size: 1em; /* 2 */
+
−
}
+
−
 
+
−
/* Text-level semantics
+
−
  ========================================================================== */
+
−
 
+
−
/**
+
−
* 1. Remove the gray background on active links in IE 10.
+
−
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
+
−
*/
+
−
 
+
−
a {
+
−
  background-color: transparent; /* 1 */
+
−
  -webkit-text-decoration-skip: objects; /* 2 */
+
−
}
+
−
 
+
−
/**
+
−
* 1. Remove the bottom border in Chrome 57- and Firefox 39-.
+
−
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+
−
*/
+
−
 
+
−
abbr[title] {
+
−
  border-bottom: none; /* 1 */
+
−
  text-decoration: underline; /* 2 */
+
−
  text-decoration: underline dotted; /* 2 */
+
−
}
+
−
 
+
−
/**
+
−
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
+
−
*/
+
−
 
+
−
b,
+
−
strong {
+
−
  font-weight: inherit;
+
−
}
+
−
 
+
−
/**
+
−
* Add the correct font weight in Chrome, Edge, and Safari.
+
−
*/
+
−
 
+
−
b,
+
−
strong {
+
−
  font-weight: bolder;
+
−
}
+
−
 
+
−
/**
+
−
* 1. Correct the inheritance and scaling of font size in all browsers.
+
−
* 2. Correct the odd `em` font sizing in all browsers.
+
−
*/
+
−
 
+
−
code,
+
−
kbd,
+
−
samp {
+
−
  font-family: monospace, monospace; /* 1 */
+
−
  font-size: 1em; /* 2 */
+
−
}
+
−
 
+
−
/**
+
−
* Add the correct font style in Android 4.3-.
+
−
*/
+
−
 
+
−
dfn {
+
−
  font-style: italic;
+
−
}
+
−
 
+
−
/**
+
−
* Add the correct background and color in IE 9-.
+
−
*/
+
−
 
+
−
mark {
+
−
  background-color: #ff0;
+
−
  color: #000;
+
−
}
+
−
 
+
−
/**
+
−
* Add the correct font size in all browsers.
+
−
*/
+
−
 
+
−
small {
+
−
  font-size: 80%;
+
−
}
+
−
 
+
−
/**
+
−
* Prevent `sub` and `sup` elements from affecting the line height in
+
−
* all browsers.
+
−
*/
+
−
 
+
−
sub,
+
−
sup {
+
−
  font-size: 75%;
+
−
  line-height: 0;
+
−
  position: relative;
+
−
  vertical-align: baseline;
+
−
}
+
−
 
+
−
sub {
+
−
  bottom: -0.25em;
+
−
}
+
−
 
+
−
sup {
+
−
  top: -0.5em;
+
−
}
+
−
 
+
−
/* Embedded content
+
−
  ========================================================================== */
+
−
 
+
−
/**
+
−
* Add the correct display in IE 9-.
+
−
*/
+
−
 
+
−
audio,
+
−
video {
+
−
  display: inline-block;
+
−
}
+
−
 
+
−
/**
+
−
* Add the correct display in iOS 4-7.
+
−
*/
+
−
 
+
−
audio:not([controls]) {
+
−
  display: none;
+
−
  height: 0;
+
−
}
+
−
 
+
−
/**
+
−
* Remove the border on images inside links in IE 10-.
+
−
*/
+
−
 
+
−
img {
+
−
  border-style: none;
+
−
}
+
−
 
+
−
/**
+
−
* Hide the overflow in IE.
+
−
*/
+
−
 
+
−
svg:not(:root) {
+
−
  overflow: hidden;
+
−
}
+
−
 
+
−
/* Forms
+
−
  ========================================================================== */
+
−
 
+
−
/**
+
−
* 1. Change the font styles in all browsers (opinionated).
+
−
* 2. Remove the margin in Firefox and Safari.
+
−
*/
+
−
 
+
−
button,
+
−
input,
+
−
optgroup,
+
−
select,
+
−
textarea {
+
−
  font-family: sans-serif; /* 1 */
+
−
  font-size: 100%; /* 1 */
+
−
  line-height: 1.15; /* 1 */
+
−
  margin: 0; /* 2 */
+
−
}
+
−
 
+
−
/**
+
−
* Show the overflow in IE.
+
−
* 1. Show the overflow in Edge.
+
−
*/
+
−
 
+
−
button,
+
−
input { /* 1 */
+
−
  overflow: visible;
+
−
}
+
−
 
+
−
/**
+
−
* Remove the inheritance of text transform in Edge, Firefox, and IE.
+
−
* 1. Remove the inheritance of text transform in Firefox.
+
−
*/
+
−
 
+
−
button,
+
−
select { /* 1 */
+
−
  text-transform: none;
+
−
}
+
−
 
+
−
/**
+
−
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
+
−
*    controls in Android 4.
+
−
* 2. Correct the inability to style clickable types in iOS and Safari.
+
−
*/
+
−
 
+
−
button,
+
−
html [type="button"], /* 1 */
+
−
[type="reset"],
+
−
[type="submit"] {
+
−
  -webkit-appearance: button; /* 2 */
+
−
}
+
−
 
+
−
/**
+
−
* Remove the inner border and padding in Firefox.
+
−
*/
+
−
 
+
−
button::-moz-focus-inner,
+
−
[type="button"]::-moz-focus-inner,
+
−
[type="reset"]::-moz-focus-inner,
+
−
[type="submit"]::-moz-focus-inner {
+
−
  border-style: none;
+
−
  padding: 0;
+
−
}
+
−
 
+
−
/**
+
−
* Restore the focus styles unset by the previous rule.
+
−
*/
+
−
 
+
−
button:-moz-focusring,
+
−
[type="button"]:-moz-focusring,
+
−
[type="reset"]:-moz-focusring,
+
−
[type="submit"]:-moz-focusring {
+
−
  outline: 1px dotted ButtonText;
+
−
}
+
−
 
+
−
/**
+
−
* Correct the padding in Firefox.
+
−
*/
+
−
 
+
−
fieldset {
+
−
  padding: 0.35em 0.75em 0.625em;
+
−
}
+
−
 
+
−
/**
+
−
* 1. Correct the text wrapping in Edge and IE.
+
−
* 2. Correct the color inheritance from `fieldset` elements in IE.
+
−
* 3. Remove the padding so developers are not caught out when they zero out
+
−
*    `fieldset` elements in all browsers.
+
−
*/
+
−
 
+
−
legend {
+
−
  box-sizing: border-box; /* 1 */
+
−
  color: inherit; /* 2 */
+
−
  display: table; /* 1 */
+
−
  max-width: 100%; /* 1 */
+
−
  padding: 0; /* 3 */
+
−
  white-space: normal; /* 1 */
+
−
}
+
−
 
+
−
/**
+
−
* 1. Add the correct display in IE 9-.
+
−
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
+
−
*/
+
−
 
+
−
progress {
+
−
  display: inline-block; /* 1 */
+
−
  vertical-align: baseline; /* 2 */
+
−
}
+
−
 
+
−
/**
+
−
* Remove the default vertical scrollbar in IE.
+
−
*/
+
−
 
+
−
textarea {
+
−
  overflow: auto;
+
−
}
+
−
 
+
−
/**
+
−
* 1. Add the correct box sizing in IE 10-.
+
−
* 2. Remove the padding in IE 10-.
+
−
*/
+
−
 
+
−
[type="checkbox"],
+
−
[type="radio"] {
+
−
  box-sizing: border-box; /* 1 */
+
−
  padding: 0; /* 2 */
+
−
}
+
−
 
+
−
/**
+
−
* Correct the cursor style of increment and decrement buttons in Chrome.
+
−
*/
+
−
 
+
−
[type="number"]::-webkit-inner-spin-button,
+
−
[type="number"]::-webkit-outer-spin-button {
+
−
  height: auto;
+
−
}
+
−
 
+
−
/**
+
−
* 1. Correct the odd appearance in Chrome and Safari.
+
−
* 2. Correct the outline style in Safari.
+
−
*/
+
−
 
+
−
[type="search"] {
+
−
  -webkit-appearance: textfield; /* 1 */
+
−
  outline-offset: -2px; /* 2 */
+
−
}
+
−
 
+
−
/**
+
−
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
+
−
*/
+
−
 
+
−
[type="search"]::-webkit-search-cancel-button,
+
−
[type="search"]::-webkit-search-decoration {
+
−
  -webkit-appearance: none;
+
−
}
+
−
 
+
−
/**
+
−
* 1. Correct the inability to style clickable types in iOS and Safari.
+
−
* 2. Change font properties to `inherit` in Safari.
+
−
*/
+
−
 
+
−
::-webkit-file-upload-button {
+
−
  -webkit-appearance: button; /* 1 */
+
−
  font: inherit; /* 2 */
+
−
}
+
−
 
+
−
/* Interactive
+
−
  ========================================================================== */
+
−
 
+
−
/*
+
−
* Add the correct display in IE 9-.
+
−
* 1. Add the correct display in Edge, IE, and Firefox.
+
−
*/
+
−
 
+
−
details, /* 1 */
+
−
menu {
+
−
  display: block;
+
−
}
+
−
 
+
−
/*
+
−
* Add the correct display in all browsers.
+
−
*/
+
−
 
+
−
summary {
+
−
  display: list-item;
+
−
}
+
−
 
+
−
/* Scripting
+
−
  ========================================================================== */
+
−
 
+
−
/**
+
−
* Add the correct display in IE 9-.
+
−
*/
+
−
 
+
−
canvas {
+
−
  display: inline-block;
+
−
}
+
−
 
+
−
/**
+
−
* Add the correct display in IE.
+
−
*/
+
−
 
+
−
template {
+
−
  display: none;
+
−
}
+
−
 
+
−
/* Hidden
+
−
  ========================================================================== */
+
−
 
+
−
/**
+
−
* Add the correct display in IE 10-.
+
−
*/
+
−
 
+
−
[hidden] {
+
−
  display: none;
+
−
}
+
−
 
+
  
−
/* latin-ext */
 
−
@font-face {
 
−
  font-family: 'Lato';
 
−
  font-style: normal;
 
−
  font-weight: 100;
 
−
  src: local('Lato Hairline'), local('Lato-Hairline'), url(https://fonts.gstatic.com/s/lato/v13/eFRpvGLEW31oiexbYNx7Y_esZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
 
−
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
 
−
}
 
−
/* latin */
 
−
@font-face {
 
−
  font-family: 'Lato';
 
−
  font-style: normal;
 
−
  font-weight: 100;
 
−
  src: local('Lato Hairline'), local('Lato-Hairline'), url(https://fonts.gstatic.com/s/lato/v13/GtRkRNTnri0g82CjKnEB0Q.woff2) format('woff2');
 
−
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
 
−
}
 
−
/* latin-ext */
 
−
@font-face {
 
−
  font-family: 'Lato';
 
−
  font-style: normal;
 
−
  font-weight: 300;
 
−
  src: local('Lato Light'), local('Lato-Light'), url(https://fonts.gstatic.com/s/lato/v13/dPJ5r9gl3kK6ijoeP1IRsvY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
 
−
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
 
−
}
 
−
/* latin */
 
−
@font-face {
 
−
  font-family: 'Lato';
 
−
  font-style: normal;
 
−
  font-weight: 300;
 
−
  src: local('Lato Light'), local('Lato-Light'), url(https://fonts.gstatic.com/s/lato/v13/EsvMC5un3kjyUhB9ZEPPwg.woff2) format('woff2');
 
−
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
 
−
}
 
−
/* latin-ext */
 
−
@font-face {
 
−
  font-family: 'Lato';
 
−
  font-style: normal;
 
−
  font-weight: 400;
 
−
  src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v13/UyBMtLsHKBKXelqf4x7VRQ.woff2) format('woff2');
 
−
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
 
−
}
 
−
/* latin */
 
−
@font-face {
 
−
  font-family: 'Lato';
 
−
  font-style: normal;
 
−
  font-weight: 400;
 
−
  src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v13/1YwB1sO8YE1Lyjf12WNiUA.woff2) format('woff2');
 
−
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
 
−
}
 
−
/* latin-ext */
 
−
@font-face {
 
−
  font-family: 'Lato';
 
−
  font-style: italic;
 
−
  font-weight: 300;
 
−
  src: local('Lato Light Italic'), local('Lato-LightItalic'), url(https://fonts.gstatic.com/s/lato/v13/XNVd6tsqi9wmKNvnh5HNEBJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
 
−
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
 
−
}
 
−
/* latin */
 
−
@font-face {
 
−
  font-family: 'Lato';
 
−
  font-style: italic;
 
−
  font-weight: 300;
 
−
  src: local('Lato Light Italic'), local('Lato-LightItalic'), url(https://fonts.gstatic.com/s/lato/v13/2HG_tEPiQ4Z6795cGfdivFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
 
−
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
 
−
}
 
  
  
  
 +
    <!-- Script to Activate the Carousel -->
 +
    <script>
 +
        $('.carousel').carousel({
 +
            interval: 5000 //changes the speed
 +
        })
 +
    </script>
 +
</body>
  
−
</style> 
 
 
</html>
 
</html>

Latest revision as of 12:52, 1 November 2017

Abstract

Acrylic acid is a bulk chemical raw material, which is widely used in many fields because of its excellent polymerization capacity, such as paint, glue, and even mobile phone screen protective film. The average annual market demand of acrylic acid is up to 8 million tons, and the market value is nearly 10 billion US dollars, which shows a promising market prospect. At present, acrylic acid is made from propylene (which is obtained by petroleum cracking) after multi-step treatment, resulting in environmental pollution, high energy consumption and a lack of sustainablility.

This year, we aim to use a greener and more environmentally- friendly carbon source, glycerol, to achieve all green production of acrylic acid. Compared to traditional chemical synthesis methods, Synbio is relatively greener and more sustainable. Also, glycerol costs less than propene.

We constructed our cell factory based on 4 levels, which are—


Core Part

We use ceaS2 enzyme as the core part, but acrylic acid is a by-product of ceaS2 enzyme, whose catalytic effect of wild type is very weak with acrylic acid production only 1mg/L. Hence, we hope to improve the catalytic effect of ceaS2 enzyme.

We designed ceaS2 enzyme mutants via the AEMD(Auto Enzyme Mutation Design) platform and screened for ceaS2 mutants that own better acrylic acid yield by HPLC(High Performance Liquid Chromatography) and HTS(High throughput screening).

System

Respectively, E. coli and S. cerevisiae are the two sorts of model organisms that are most convenient to operate in the prokaryote and eukaryote. Therefore, in terms of our choice of the chassis organisms, we have E. coli MG1655 and S. cerevisiae BY4741 tested individually.

Pathway

We need to design two different metabolic pathways for two different chassis organisms and propose different optimization schemes. We introduced the ceaS2 enzyme exogenously on the basis of the glycerol metabolism of the two organisms, so that they could produce the target product acrylic acid using the intermediates G3P and DHAP.

Besides the construction of the pathways, we also reconstructed and optimized the original metabolic pathway to increase the carbon flux rate of the designed pathway and reduced the loss of by-pass carbon flux.

Production

All of the previous processes were applied in building the engineered microorganism strains which have a high production of acrylic acid. In the subsequent fermentation, we also determined the best conditions of the engineered microorganism strains.

Therefore, we selected to control the carbon source, buffer, temperature, pH and other conditions to optimize the cell production process.