Line 1: | Line 1: | ||
− | {{ | + | {{MIT}} |
− | <html> | + | <html lang='en'> |
+ | <head> | ||
+ | <link href="https://fonts.googleapis.com/css?family=Lato:100,300,300i,400" rel="stylesheet"> | ||
+ | <link href="https://fonts.googleapis.com/css?family=Courgette" 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"> |
− | < | + | <div class="row"> |
− | </div> | + | <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> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | </body> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | < | + | <style> |
+ | /* ================================================== | ||
+ | BASIC SETUP | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | */ | |
− | + | ||
− | + | ||
− | + | /* ================================================== | |
+ | BASIC SETUP | ||
+ | */ | ||
− | |||
− | |||
− | |||
− | |||
− | + | *{ | |
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | box-sizing: border-box; | ||
+ | |||
+ | } | ||
+ | html { | ||
+ | background-color: #fff; | ||
+ | color: #555; | ||
+ | font-family: 'Lato', 'Arial', sans-serif; | ||
+ | font-weight: 300; | ||
+ | font-size: 20px; | ||
+ | text-rendering: optimizeLegibility; | ||
+ | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
+ | .row{ | ||
+ | max-width: 1140px; | ||
+ | margin: 0 auto; | ||
+ | } | ||
− | + | .nav-text{ | |
− | + | color: #fff; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
+ | h1, | ||
+ | h2, | ||
+ | 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; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | </style> | ||
</html> | </html> |
Revision as of 12:49, 17 October 2017
What is Alternative splicing?
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
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.