Difference between revisions of "Team:UMaryland/Measurement"

 
(30 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 +
 +
</div>
 +
</div>
 
<html lang="en">
 
<html lang="en">
<head>  
+
 
      <script>
+
<head>
/* Hiding stupid stuff*/
+
    <script>
                $('#top_title').css('display', 'none');
+
        $('body').css('opacity', '0');
$('#top_menu').css('display', 'none');
+
    </script>
//$('#top_menu_14').css('display', 'none');
+
    <script src="https://static.igem.org/mediawiki/2016/9/95/T--UMaryland--html5shiv.txt"></script>
                $('#HQ_page').css('display', 'none');
+
    <script src="https://static.igem.org/mediawiki/2016/c/ce/T--UMaryland--parallax.txt"></script>
$('#top_menu_under').css('display', 'none');
+
    <script src="https://static.igem.org/mediawiki/2016/d/d3/T--UMaryland--slick.txt" type="text/javascript"></script>
$('#content').removeClass('mw-body');
+
    <title>Human Practices</title>
$('#content').attr('role','dummy2')
+
$('#content').attr('id','dummy')
+
$('#HQ_page').attr("id","iGEM"); //voids all dumb CSS iGEM HQ wrote which overrides our code
+
$('#mw-content-text').attr("id","overruled").removeClass('mw-content-ltr');
+
</script>
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
        <script>
+
        $(body).css('display','none');
+
        </script>
+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+
<script type="text/javascript">
+
if (typeof jQuery == 'undefined') {
+
document.write(unescape("%3Cscript src='js/jquery-1.10.2.min.js' type='text/javascript'%3E%3C/script%3E"));
+
}
+
</script>
+
<link href='https://fonts.googleapis.com/css?family=Raleway:400,200' rel='stylesheet' type='text/css'>
+
<link href='https://fonts.googleapis.com/css?family=Exo|Lora' rel='stylesheet' type='text/css'>
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
+
+
<title>Interlab Study</title>
+
 
</head>
 
</head>
 +
 
<body>
 
<body>
 +
    <style>
 +
        @font-face {
 +
            font-family: 'Exo';
 +
            font-style: normal;
 +
            font-weight: 400;
 +
            src: url(https://static.igem.org/mediawiki/2016/0/02/T--UMaryland--Exo.woff) format('woff2');
 +
        }
 +
       
 +
        @font-face {
 +
            font-family: 'Lora';
 +
            font-style: normal;
 +
            font-weight: 400;
 +
            src: url(https://static.igem.org/mediawiki/2016/6/61/T--UMaryland--Lora.woff) format('woff2');
 +
        }
 +
       
 +
        @font-face {
 +
            font-family: 'Raleway';
 +
            font-style: normal;
 +
            font-weight: 200;
 +
            src: url(https://static.igem.org/mediawiki/2016/b/b7/T--UMaryland--RalewayLight.woff) format('woff2');
 +
        }
 +
       
 +
        @font-face {
 +
            font-family: 'Raleway';
 +
            font-style: normal;
 +
            font-weight: 400;
 +
            src: url(https://static.igem.org/mediawiki/2016/5/58/T--UMaryland--Raleway.woff) format('woff2');
 +
        }
 +
    </style>
 
<style>
 
<style>
 
/* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; } [dir='rtl'] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } .slick-arrow { background-color: #B0B0B0;}  
 
/* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; } [dir='rtl'] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } .slick-arrow { background-color: #B0B0B0;}  
Line 38: Line 50:
 
@charset 'UTF-8'; /* Slider */ .slick-loading .slick-list { background: #fff url('https://static.igem.org/mediawiki/2016/8/85/T--UMaryland--ajax-loader.gif') center center no-repeat; } /* Icons */ @font-face { font-family: 'slick'; font-weight: normal; font-style: normal; src: url('./fonts/slick.eot'); src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('https://static.igem.org/mediawiki/2016/a/a9/T--UMaryland--slick.woff') format('woff'), url('https://static.igem.org/mediawiki/2016/b/b8/T--UMaryland--slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg'); } /* Arrows */ .slick-prev, .slick-next { font-size: 0; line-height: 0; position: absolute; top: 50%; display: block; width: 20px; height: 20px; padding: 0; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); cursor: pointer; color: transparent; border: none; outline: none; background: transparent; } .slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { color: transparent; outline: none; background: transparent; } .slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 1; } .slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: .25; } .slick-prev:before, .slick-next:before { font-family: 'slick'; font-size: 25px; line-height: 1; opacity: .75; color: #808080; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-prev { left: -25px; } [dir='rtl'] .slick-prev { right: -25px; left: auto; } .slick-prev:before { content: '←'; } [dir='rtl'] .slick-prev:before { content: '→'; } .slick-next { right: -25px; } [dir='rtl'] .slick-next { right: auto; left: -25px; } .slick-next:before { content: '→'; } [dir='rtl'] .slick-next:before { content: '←'; } /* Dots */ .slick-dotted.slick-slider { margin-bottom: 30px; } .slick-dots { position: absolute; bottom: -25px; display: block; width: 100%; padding: 0; margin: 0; list-style: none; text-align: center; } .slick-dots li { position: relative; display: inline-block; width: 20px; height: 20px; margin: 0 5px; padding: 0; cursor: pointer; } .slick-dots li button { font-size: 0; line-height: 0; display: block; width: 20px; height: 20px; padding: 5px; cursor: pointer; color: transparent; border: 0; outline: none; background: transparent; } .slick-dots li button:hover, .slick-dots li button:focus { outline: none; } .slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1; } .slick-dots li button:before { font-family: 'slick'; font-size: 6px; line-height: 20px; position: absolute; top: 0; left: 0; width: 20px; height: 20px; content: '•'; text-align: center; opacity: .25; color: black; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-dots li.slick-active button:before { opacity: .75; color: black; }  
 
@charset 'UTF-8'; /* Slider */ .slick-loading .slick-list { background: #fff url('https://static.igem.org/mediawiki/2016/8/85/T--UMaryland--ajax-loader.gif') center center no-repeat; } /* Icons */ @font-face { font-family: 'slick'; font-weight: normal; font-style: normal; src: url('./fonts/slick.eot'); src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('https://static.igem.org/mediawiki/2016/a/a9/T--UMaryland--slick.woff') format('woff'), url('https://static.igem.org/mediawiki/2016/b/b8/T--UMaryland--slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg'); } /* Arrows */ .slick-prev, .slick-next { font-size: 0; line-height: 0; position: absolute; top: 50%; display: block; width: 20px; height: 20px; padding: 0; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); cursor: pointer; color: transparent; border: none; outline: none; background: transparent; } .slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { color: transparent; outline: none; background: transparent; } .slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 1; } .slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: .25; } .slick-prev:before, .slick-next:before { font-family: 'slick'; font-size: 25px; line-height: 1; opacity: .75; color: #808080; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-prev { left: -25px; } [dir='rtl'] .slick-prev { right: -25px; left: auto; } .slick-prev:before { content: '←'; } [dir='rtl'] .slick-prev:before { content: '→'; } .slick-next { right: -25px; } [dir='rtl'] .slick-next { right: auto; left: -25px; } .slick-next:before { content: '→'; } [dir='rtl'] .slick-next:before { content: '←'; } /* Dots */ .slick-dotted.slick-slider { margin-bottom: 30px; } .slick-dots { position: absolute; bottom: -25px; display: block; width: 100%; padding: 0; margin: 0; list-style: none; text-align: center; } .slick-dots li { position: relative; display: inline-block; width: 20px; height: 20px; margin: 0 5px; padding: 0; cursor: pointer; } .slick-dots li button { font-size: 0; line-height: 0; display: block; width: 20px; height: 20px; padding: 5px; cursor: pointer; color: transparent; border: 0; outline: none; background: transparent; } .slick-dots li button:hover, .slick-dots li button:focus { outline: none; } .slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1; } .slick-dots li button:before { font-family: 'slick'; font-size: 6px; line-height: 20px; position: absolute; top: 0; left: 0; width: 20px; height: 20px; content: '•'; text-align: center; opacity: .25; color: black; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-dots li.slick-active button:before { opacity: .75; color: black; }  
 
</style>
 
</style>
<script src="https://static.igem.org/mediawiki/2016/d/d3/T--UMaryland--slick.txt" type="text/javascript">
 
</script>
 
<nav>
 
<img src="https://static.igem.org/mediawiki/2016/2/26/T--UMaryland--newlogo.jpeg" id="img-logo" width="128px">
 
<ul>
 
<a style="opacity: 0">Fix</a>
 
<li><a href="https://2016.igem.org/Team:UMaryland/projects">Projects</a></li>
 
<!--<li><a href="https://2016.igem.org/Team:UMaryland/parts">Parts</a></li>
 
<li><a href="https://2016.igem.org/Team:UMaryland/modeling">Modeling</a></li>-->
 
<li><a href="https://2016.igem.org/Team:UMaryland/outreach">Outreach</a></li>
 
<li><a href="https://2016.igem.org/Team:UMaryland/notebook">Notebook</a></li>
 
<li><a href="https://2016.igem.org/Team:UMaryland/about">About Us</a></li>
 
</ul>
 
</nav>
 
<img src="https://static.igem.org/mediawiki/2016/e/e5/T--UMaryland--more.png" id="img-more">
 
<!-- Nav bar when more button is clicked -->
 
<div id="div-navResized">
 
<img src="https://static.igem.org/mediawiki/2016/2/26/T--UMaryland--newlogo.jpeg" id="img-logoResized">
 
<ul>
 
<li><a href="https://2016.igem.org/Team:UMaryland/projects">Projects</a></li>
 
<!--<li><a href="https://2016.igem.org/Team:UMaryland/parts">Parts</a></li>
 
<li><a href="https://2016.igem.org/Team:UMaryland/modeling">Modeling</a></li>-->
 
<li><a href="https://2016.igem.org/Team:UMaryland/outreach">Outreach</a></li>
 
<li><a href="https://2016.igem.org/Team:UMaryland/notebook">Notebook</a></li>
 
<li><a href="https://2016.igem.org/Team:UMaryland/about">About Us</a></li>
 
</ul>
 
</div>
 
<script>
 
// Animation over top nav bar when mouse hovers
 
$('nav').mouseover(
 
function () {
 
$('#img-logo').css('transition', '.35s ease-in');
 
$('#img-logo').css('opacity', '1');
 
$('nav ul').addClass("hover");
 
}
 
),
 
$('nav').mouseout(
 
function () {
 
var scroll = $(window).scrollTop();
 
if (scroll > 0) {if ( $(window).width() >= 980) { var pushed = $('body').hasClass('pushed'); if (pushed == false) {
 
$('#img-logo').css('transition', '.25s ease');
 
$('#img-logo').css('opacity', '0');
 
$('nav ul').removeClass("hover");
 
$('nav').css('transition', '.5s ease');
 
}}}
 
 
}
 
),
 
// Window width effect on top nav bar
 
$(document).ready(function() {   
 
function checkWidth() {
 
if ($(window).width() < 980 || $('nav').hasClass('pushed')){
 
$('nav li').css('display', 'none');
 
$('#img-more').css('display','block');
 
$('nav ul').addClass("hover");
 
$('#img-logo').css('transition', '.35s ease-in');
 
$('#img-logo').css('opacity', '1');
 
} else {
 
$('nav li').css('display', 'inline');
 
$('#img-more').css('display','none');
 
$('nav ul').removeClass("hover");
 
if ($(window).scrollTop() > 0) {
 
$('#img-logo').css('transition', '.25s ease');
 
$('#img-logo').css('opacity', '0');
 
$('nav ul').addClass("scrolled");
 
}
 
}
 
}
 
// Execute on load
 
    checkWidth();
 
    // Bind function to window resize
 
    $(window).resize(checkWidth);
 
});
 
// Resized nav bar effect when more icon is clicked
 
$('#img-more').click(function() {
 
$('#img-more').toggleClass('pushed');
 
$('#div-navResized').toggleClass('pushed');
 
$('nav').toggleClass('pushed');
 
$('nav img').toggleClass('pushed');
 
$('body').toggleClass('pushed');
 
if ($(window).width() >= 980) { var pushed = $('body').hasClass('pushed'); if (pushed == false){
 
$('nav li').css('display', 'inline');
 
$('#img-more').css('display','none');
 
$('nav ul').removeClass("hover");
 
$('#img-logo').css('transition', '.25s ease');
 
$('#img-logo').css('opacity', '0');
 
}}
 
});
 
// Scrolling animation for top nav bar
 
var nav = $('nav ul');
 
$(window).scroll(function() {
 
var scroll = $(window).scrollTop();
 
if (scroll > 0) { if ( $(window).width() >= 980) {
 
nav.addClass("scrolled");
 
nav.removeClass("hover");
 
$('#img-logo').css('transition', '.25s ease');
 
$('#img-logo').css('opacity', '0');
 
}} else {
 
nav.removeClass("scrolled");
 
$('#img-logo').css('transition', '.35s ease-in');
 
$('#img-logo').css('opacity', '1');
 
}
 
});
 
</script>
 
<div data-parallax="scroll" data-image-src="https://static.igem.org/mediawiki/2016/5/5a/T--UMaryland--il.jpg" id="div-pic">
 
<div class="titleText">
 
<!-- where background image below titles show -->
 
<h11>Interlab Study</h11>
 
<h21>Fluorescence Data From 3 Different Constructs with GFP</h21>
 
<h31>Standardizing fluorescence measurements and promoting further joint scientific efforts of the iGEM community. </h31>
 
</div>
 
        </div>
 
<div id="div-text"> <!-- Start of main text of page -->
 
<!-- Heading text -->
 
 
 
<div class="longText">
 
<p>The interlab study measures the fluorescence of three different constructs with GFP as well as a positive and negative control. It attempts to standardize the fluorescence measurements by adjusting absorbance values when compared to blanks, reducing the amount of independent variables by controlling for concentration, and adjusting fluorescence values based on the standard curve of FITC.  The goal of this study is to see how the observed fluorescence values compare across the iGEM community to see if the adjustments successfully standardize fluorescence measurements.</p>
 
<p>As a community of synthetic biologist, a key to the advancement of the field is collaboration among groups. For proper collaboration, we must be able to communicate our findings in ways that are concrete and well defined, making standards essential.</p>
 
</div>
 
<div class="longText">
 
<h4>Tested Devices</h4>
 
<p>Transform competent cells with Test Devices 1 - 3, positive control, and negative control provided and plate them overnight on chloramphenicol resistant plates.</p>
 
<ul>
 
<li>Test Device 1: J23101.B0034.E0040.B0015 in pSB1C3</li>
 
<li>Test Device 2: J23106.B0034.E0040.B0015 in pSB1C3</li>
 
<li>Test Device 3: J23117.B0034.E0040.B0015 in pSB1C3</li>
 
<li>Positive Control Device: I20270 in pSB1C3</li>
 
<li>Negative Control Device: R0040 in pSB1C3</li>
 
</ul>
 
</div>
 
<div class="longText" id="div-protocol">
 
<h4>Protocol</h4>
 
<ol>
 
<li>Pick two colonies from each plate to inoculate and grow overnight.
 
</li>
 
<li>Calibrate the plate reader-
 
Measure absorbance of LUDOX and water to find a corrected absorbance that can then be used to find a conversion factor for a standard OD600 measurement.</li>
 
<li>Use FITC to create a standard fluorescence curve -
 
Measure fluorescence of FITC at different concentrations to generate a curve of fluorescence over concentration.</li>
 
<li>Measure OD600  of the overnight cultures and create dilutions to put them at an OD600 of 0.02.</li>
 
<li>Incubate at 37 C and take 100ul samples every hour (from hours 0-6).</li>
 
<li>Measure OD600 of all the samples and record.</li>
 
</ol>
 
</div>
 
<div class="longText">
 
<h4>Results</h4>
 
<div id="div-results">
 
<ul>
 
<li>Most samples grew exponentially, device 1 replicate 1 and device 1 replicate 2 seemed to have little growth.</li>
 
<li>Negative control and device 3 did not show fluorescence. Positive control, device 1, and device 2 showed increases in fluorescence over time.</li>
 
<li>The results show that fluorescence per unit of concentration remains relatively constant over time.</li>
 
</ul>
 
</div>
 
<div id="div-figures">
 
<div>
 
<img class="figure" src="https://static.igem.org/mediawiki/2016/a/ae/T--UMaryland--absorbance.JPG">
 
<small class="caption">Figure 1. Cell growth versus absorbance.</small>
 
</div>
 
<div>
 
<img class="figure" src="https://static.igem.org/mediawiki/2016/1/17/T--UMaryland--fluorescence.JPG">
 
<small class="caption">Figure 2. Cell growth versus flourescence.</small>
 
</div>
 
<div>
 
<img class="figure" src="https://static.igem.org/mediawiki/2016/4/43/T--UMaryland--abs-fluor.JPG">
 
<small class="caption">Figure 3. Cell growth versus absorbance / flourescence.</small>
 
</div>
 
</div>
 
</div>
 
</div>
 
 
<style>
 
<style>
.caption {
+
@charset "UTF-8";
font-weight: bold;
+
margin-left: 25px;
+
}
+
+
.titleText {
+
margin-left: 175px;
+
width: 1000px;
+
}
+
#div-figures{
+
padding-bottom: 100px;
+
font-size: 14pt;
+
}
+
        h11 {
+
            color: white;
+
            font-size: 30pt;
+
            font-weight: 400;
+
            text-align: left;
+
            display: block;
+
margin-top: 60px;
+
padding-top: 180px;
+
            -webkit-margin-after: 0.83em;
+
        }
+
  
        h21 {
+
/*!
            color: white;
+
* animate.css -http://daneden.me/animate
            font-size: 24pt;
+
* Version - 3.5.1
            font-weight: 300;
+
* Licensed under the MIT license - http://opensource.org/licenses/MIT
            text-align: left;
+
*
            display: block;
+
* Copyright (c) 2016 Daniel Eden
            -webkit-margin-before: 0.83em;
+
*/
            -webkit-margin-after: 0.83em;
+
        }
+
  
        h31 {
+
.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animated.hinge{-webkit-animation-duration:2s;animation-duration:2s}.animated.bounceIn,.animated.bounceOut,.animated.flipOutX,.animated.flipOutY{-webkit-animation-duration:.75s;animation-duration:.75s}@-webkit-keyframes bounce{0%,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0);transform:translateZ(0)}40%,43%{-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}40%,43%,70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06)}70%{-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}@keyframes bounce{0%,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0);transform:translateZ(0)}40%,43%{-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}40%,43%,70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06)}70%{-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}.bounce{-webkit-animation-name:bounce;animation-name:bounce;-webkit-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.pulse{-webkit-animation-name:pulse;animation-name:pulse}@-webkit-keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}@-webkit-keyframes shake{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}@keyframes shake{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}.shake{-webkit-animation-name:shake;animation-name:shake}@-webkit-keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deg)}50%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deg)}50%{-webkit-transform:translateX(0);transform:translateX(0)}}.headShake{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-name:headShake;animation-name:headShake}@-webkit-keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}.swing{-webkit-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;animation-name:swing}@-webkit-keyframes tada{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes tada{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.tada{-webkit-animation-name:tada;animation-name:tada}@-webkit-keyframes wobble{0%{-webkit-transform:none;transform:none}15%{-webkit-transform:translate3d(-25%,0,0) rotate(-5deg);transform:translate3d(-25%,0,0) rotate(-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate(3deg);transform:translate3d(20%,0,0) rotate(3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate(-3deg);transform:translate3d(-15%,0,0) rotate(-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate(2deg);transform:translate3d(10%,0,0) rotate(2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate(-1deg);transform:translate3d(-5%,0,0) rotate(-1deg)}to{-webkit-transform:none;transform:none}}@keyframes wobble{0%{-webkit-transform:none;transform:none}15%{-webkit-transform:translate3d(-25%,0,0) rotate(-5deg);transform:translate3d(-25%,0,0) rotate(-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate(3deg);transform:translate3d(20%,0,0) rotate(3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate(-3deg);transform:translate3d(-15%,0,0) rotate(-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate(2deg);transform:translate3d(10%,0,0) rotate(2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate(-1deg);transform:translate3d(-5%,0,0) rotate(-1deg)}to{-webkit-transform:none;transform:none}}.wobble{-webkit-animation-name:wobble;animation-name:wobble}@-webkit-keyframes jello{0%,11.1%,to{-webkit-transform:none;transform:none}22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{-webkit-transform:skewX(.390625deg) skewY(.390625deg);transform:skewX(.390625deg) skewY(.390625deg)}88.8%{-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skewX(-.1953125deg) skewY(-.1953125deg)}}@keyframes jello{0%,11.1%,to{-webkit-transform:none;transform:none}22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{-webkit-transform:skewX(.390625deg) skewY(.390625deg);transform:skewX(.390625deg) skewY(.390625deg)}88.8%{-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skewX(-.1953125deg) skewY(-.1953125deg)}}.jello{-webkit-animation-name:jello;animation-name:jello;-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}.bounceIn{-webkit-animation-name:bounceIn;animation-name:bounceIn}@-webkit-keyframes bounceInDown{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}to{-webkit-transform:none;transform:none}}@keyframes bounceInDown{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}to{-webkit-transform:none;transform:none}}.bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}@-webkit-keyframes bounceInLeft{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}to{-webkit-transform:none;transform:none}}@keyframes bounceInLeft{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}to{-webkit-transform:none;transform:none}}.bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}@-webkit-keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}to{-webkit-transform:none;transform:none}}@keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}to{-webkit-transform:none;transform:none}}.bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceInUp{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInUp{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp}@-webkit-keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}to{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}@keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}to{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}.bounceOut{-webkit-animation-name:bounceOut;animation-name:bounceOut}@-webkit-keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown}@-webkit-keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft}@-webkit-keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}@-webkit-keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.bounceOutUp{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOutDown{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes fadeOutDown{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}@-webkit-keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}@-webkit-keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}@-webkit-keyframes fadeOutLeftBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes fadeOutLeftBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}@-webkit-keyframes fadeOutRight{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes fadeOutRight{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}@-webkit-keyframes fadeOutUp{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes fadeOutUp{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}@-webkit-keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) rotateY(-1turn);transform:perspective(400px) rotateY(-1turn)}0%,40%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(-190deg);transform:perspective(400px) translateZ(150px) rotateY(-190deg)}50%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(-170deg);transform:perspective(400px) translateZ(150px) rotateY(-170deg)}50%,80%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95)}to{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes flip{0%{-webkit-transform:perspective(400px) rotateY(-1turn);transform:perspective(400px) rotateY(-1turn)}0%,40%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(-190deg);transform:perspective(400px) translateZ(150px) rotateY(-190deg)}50%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(-170deg);transform:perspective(400px) translateZ(150px) rotateY(-170deg)}50%,80%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95)}to{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}.animated.flip{-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip}@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}0%,40%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}40%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg)}60%{-webkit-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateX(-5deg);transform:perspective(400px) rotateX(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}0%,40%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}40%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg)}60%{-webkit-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateX(-5deg);transform:perspective(400px) rotateX(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}.flipInX{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInX;animation-name:flipInX}@-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}0%,40%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}40%{-webkit-transform:perspective(400px) rotateY(-20deg);transform:perspective(400px) rotateY(-20deg)}60%{-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px) rotateY(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}0%,40%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}40%{-webkit-transform:perspective(400px) rotateY(-20deg);transform:perspective(400px) rotateY(-20deg)}60%{-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px) rotateY(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}.flipInY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInY;animation-name:flipInY}@-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);opacity:1}to{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}}@keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);opacity:1}to{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}}.flipOutX{-webkit-animation-name:flipOutX;animation-name:flipOutX;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateY(-15deg);transform:perspective(400px) rotateY(-15deg);opacity:1}to{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}}@keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateY(-15deg);transform:perspective(400px) rotateY(-15deg);opacity:1}to{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}}.flipOutY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipOutY;animation-name:flipOutY}@-webkit-keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg)}60%,80%{opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg)}to{-webkit-transform:none;transform:none;opacity:1}}@keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg)}60%,80%{opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg)}to{-webkit-transform:none;transform:none;opacity:1}}.lightSpeedIn{-webkit-animation-name:lightSpeedIn;animation-name:lightSpeedIn;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedOut{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}@keyframes lightSpeedOut{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}.lightSpeedOut{-webkit-animation-name:lightSpeedOut;animation-name:lightSpeedOut;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes rotateIn{0%{transform-origin:center;-webkit-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}0%,to{-webkit-transform-origin:center}to{transform-origin:center;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateIn{0%{transform-origin:center;-webkit-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}0%,to{-webkit-transform-origin:center}to{transform-origin:center;-webkit-transform:none;transform:none;opacity:1}}.rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn}@-webkit-keyframes rotateInDownLeft{0%{transform-origin:left bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}0%,to{-webkit-transform-origin:left bottom}to{transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInDownLeft{0%{transform-origin:left bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}0%,to{-webkit-transform-origin:left bottom}to{transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}.rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft}@-webkit-keyframes rotateInDownRight{0%{transform-origin:right bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}0%,to{-webkit-transform-origin:right bottom}to{transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInDownRight{0%{transform-origin:right bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}0%,to{-webkit-transform-origin:right bottom}to{transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}.rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight}@-webkit-keyframes rotateInUpLeft{0%{transform-origin:left bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}0%,to{-webkit-transform-origin:left bottom}to{transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInUpLeft{0%{transform-origin:left bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}0%,to{-webkit-transform-origin:left bottom}to{transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}.rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft}@-webkit-keyframes rotateInUpRight{0%{transform-origin:right bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}0%,to{-webkit-transform-origin:right bottom}to{transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInUpRight{0%{transform-origin:right bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}0%,to{-webkit-transform-origin:right bottom}to{transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}.rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight}@-webkit-keyframes rotateOut{0%{transform-origin:center;opacity:1}0%,to{-webkit-transform-origin:center}to{transform-origin:center;-webkit-transform:rotate(200deg);transform:rotate(200deg);opacity:0}}@keyframes rotateOut{0%{transform-origin:center;opacity:1}0%,to{-webkit-transform-origin:center}to{transform-origin:center;-webkit-transform:rotate(200deg);transform:rotate(200deg);opacity:0}}.rotateOut{-webkit-animation-name:rotateOut;animation-name:rotateOut}@-webkit-keyframes rotateOutDownLeft{0%{transform-origin:left bottom;opacity:1}0%,to{-webkit-transform-origin:left bottom}to{transform-origin:left bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}}@keyframes rotateOutDownLeft{0%{transform-origin:left bottom;opacity:1}0%,to{-webkit-transform-origin:left bottom}to{transform-origin:left bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}}.rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft}@-webkit-keyframes rotateOutDownRight{0%{transform-origin:right bottom;opacity:1}0%,to{-webkit-transform-origin:right bottom}to{transform-origin:right bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}@keyframes rotateOutDownRight{0%{transform-origin:right bottom;opacity:1}0%,to{-webkit-transform-origin:right bottom}to{transform-origin:right bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}.rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight}@-webkit-keyframes rotateOutUpLeft{0%{transform-origin:left bottom;opacity:1}0%,to{-webkit-transform-origin:left bottom}to{transform-origin:left bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}@keyframes rotateOutUpLeft{0%{transform-origin:left bottom;opacity:1}0%,to{-webkit-transform-origin:left bottom}to{transform-origin:left bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}.rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft}@-webkit-keyframes rotateOutUpRight{0%{transform-origin:right bottom;opacity:1}0%,to{-webkit-transform-origin:right bottom}to{transform-origin:right bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}@keyframes rotateOutUpRight{0%{transform-origin:right bottom;opacity:1}0%,to{-webkit-transform-origin:right bottom}to{transform-origin:right bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}.rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight}@-webkit-keyframes hinge{0%{transform-origin:top left}0%,20%,60%{-webkit-transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);transform:rotate(80deg);transform-origin:top left}40%,80%{-webkit-transform:rotate(60deg);transform:rotate(60deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}to{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}@keyframes hinge{0%{transform-origin:top left}0%,20%,60%{-webkit-transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);transform:rotate(80deg);transform-origin:top left}40%,80%{-webkit-transform:rotate(60deg);transform:rotate(60deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}to{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}.hinge{-webkit-animation-name:hinge;animation-name:hinge}@-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate(-120deg);transform:translate3d(-100%,0,0) rotate(-120deg)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate(-120deg);transform:translate3d(-100%,0,0) rotate(-120deg)}to{opacity:1;-webkit-transform:none;transform:none}}.rollIn{-webkit-animation-name:rollIn;animation-name:rollIn}@-webkit-keyframes rollOut{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate(120deg);transform:translate3d(100%,0,0) rotate(120deg)}}@keyframes rollOut{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate(120deg);transform:translate3d(100%,0,0) rotate(120deg)}}.rollOut{-webkit-animation-name:rollOut;animation-name:rollOut}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}@-webkit-keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInDown{-webkit-animation-name:zoomInDown;animation-name:zoomInDown}@-webkit-keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInLeft{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft}@-webkit-keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInRight{-webkit-animation-name:zoomInRight;animation-name:zoomInRight}@-webkit-keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp}@-webkit-keyframes zoomOut{0%{opacity:1}50%{-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%,to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%,to{opacity:0}}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}@-webkit-keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomOutDown{-webkit-animation-name:zoomOutDown;animation-name:zoomOutDown}@-webkit-keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;transform-origin:left center}}@keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;transform-origin:left center}}.zoomOutLeft{-webkit-animation-name:zoomOutLeft;animation-name:zoomOutLeft}@-webkit-keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;transform-origin:right center}}@keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;transform-origin:right center}}.zoomOutRight{-webkit-animation-name:zoomOutRight;animation-name:zoomOutRight}@-webkit-keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomOutUp{-webkit-animation-name:zoomOutUp;animation-name:zoomOutUp}@-webkit-keyframes slideInDown{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInDown{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInDown{-webkit-animation-name:slideInDown;animation-name:slideInDown}@-webkit-keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInLeft{-webkit-animation-name:slideInLeft;animation-name:slideInLeft}@-webkit-keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInRight{-webkit-animation-name:slideInRight;animation-name:slideInRight}@-webkit-keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp}@-webkit-keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.slideOutDown{-webkit-animation-name:slideOutDown;animation-name:slideOutDown}@-webkit-keyframes slideOutLeft{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes slideOutLeft{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.slideOutLeft{-webkit-animation-name:slideOutLeft;animation-name:slideOutLeft}@-webkit-keyframes slideOutRight{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes slideOutRight{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.slideOutRight{-webkit-animation-name:slideOutRight;animation-name:slideOutRight}@-webkit-keyframes slideOutUp{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes slideOutUp{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.slideOutUp{-webkit-animation-name:slideOutUp;animation-name:slideOutUp}
            color: white;
+
</style>
            font-size: 18pt;
+
            font-weight: 200;
+
            text-align: left;
+
            display: block;
+
            -webkit-margin-before: 0.83em;
+
            -webkit-margin-after: 0.83em;
+
        }
+
 
+
        #div-text {
+
padding-top: 100px;
+
background-color: #f9f9f9;
+
        }
+
 
+
        #div-pic {
+
            z-index: -999;
+
            height: 500px;
+
        }
+
 
+
        .imageEmbed {
+
            /* creates border around image on each page */
+
            border-style: solid;
+
            margin-top: 50px;
+
            margin-bottom: 50px;
+
            border-color: #A8A8A8;
+
            border-width: 2px;
+
        }
+
 
+
        #div-text p, .longText li {
+
            /* formats text and lists within .longText */
+
            font-size: 14pt;
+
            line-height: 2;
+
            font-weight: 400;
+
        }
+
 
+
        .longText {
+
            /* fixes width of the text and displays it slighly left of center */
+
            width: 850px;
+
            margin-left: 175px;
+
            margin-right: auto;
+
        }
+
 
+
        h4 {
+
            /* formats intratext section headings */
+
            font-size: 20pt;
+
            margin-top: 80px;
+
        }
+
 
+
        .blockText {
+
            /* initially hides all of the text on page */
+
            display: none;
+
            margin-top: 50px;
+
        }
+
 
+
        .firstHeader {
+
            margin-top: 30px;
+
        }
+
 
+
        .figure {
+
            /* fixes the width of images in results tables */
+
            width: 800px;
+
display: block;
+
            border-style: solid;
+
            border-color: #A8A8A8;
+
            border-width: 2px;
+
margin-top: 50px;
+
margin-bottom: 20px;
+
margin-left: auto;
+
margin-right: auto;
+
        }
+
 
+
        /* formats caption and heading of results tables */
+
        td p {
+
            padding: 15px 0 15px 0;
+
            margin: 0 0 30px 0;
+
            font-size: 12pt;
+
            line-height: 1.5;
+
            width: 500px;
+
        }
+
 
+
        td h51 {
+
            padding: 0 0 15px 0;
+
            margin: 25px 0 0px 0;
+
            font-size: 16pt;
+
        }
+
 
+
        td {
+
            vertical-align: top;
+
        }
+
 
+
        #table-devices {
+
            width: 600px;
+
            margin-left: 190px;
+
            margin-right: auto;
+
        }
+
 
+
        #h4-first {
+
            margin-top: 50px;
+
        }
+
        </style>
+
    <div id="bot-nav">
+
        <div id="container">
+
            <div class="pull-left">
+
                <a href="mailto:umarylandigem@gmail.com"><p id="contact"> Contact Us </p></a>
+
            </div>
+
            <div class="pull-right">
+
                <ul id="social-media">
+
                    <li> <a href="https://www.facebook.com/UMarylandiGEM/"> <img src="https://static.igem.org/mediawiki/2016/9/9f/T--UMaryland--fbLogo.jpeg"/> </a> </li>
+
                    <li> <a href="https://www.instagram.com/umarylandigem/"> <img src="https://static.igem.org/mediawiki/2016/c/ca/T--UMaryland--instalogo.jpg"/> </a> </li>
+
                </ul>
+
            </div>
+
        </div>
+
<div class="copyright">
+
            <p id="copyright">© University of Maryland iGEM 2016</p>
+
</div>
+
    </div>
+
</body>
+
 
<style>
 
<style>
 
/* Permanent bottom bar */
 
/* Permanent bottom bar */
Line 542: Line 245:
 
             left: 0;
 
             left: 0;
 
             right: 0;
 
             right: 0;
             margin-top: 100px;
+
             margin-top: 200px;
 
             z-index: 3;
 
             z-index: 3;
 
         }
 
         }
Line 637: Line 340:
 
             right: 15px;
 
             right: 15px;
 
             z-index: 2;
 
             z-index: 2;
             margin-top: -83px;
+
             margin-top: -12px;
 
         }
 
         }
  
Line 650: Line 353:
 
         }
 
         }
  
#div-protocol {
+
        </style>
min-height: 550px;
+
 +
<style>
 +
.caption {
 +
font-size: 12pt;
 +
font-weight: bold;
 +
margin-left: 25px;
 
}
 
}
 +
 +
#div-figures{
 +
padding-bottom: 100px;
 +
font-size: 14pt;
 +
}
 +
 +
.titleText {
 +
position: absolute;
 +
top: 350px;
 +
left: 50%;
 +
margin-left: -40%;
 +
right: auto;
 +
width: 80%;
 +
min-width: 600px;
 +
max-width: 1500px;
 +
}
 +
 +
h11, h21, h31 {
 +
font-family: Lora;
 +
display: inline-block;
 +
position: relative;
 +
padding-bottom: 10px;
 +
padding-left: 10px;
 +
padding-top: 10px;
 +
padding-right: 10px;
 +
background: rgba(0,0,0, 0.7);
 +
line-height: 1em;
 +
}
 +
 +
        h11 {
 +
            color: white;
 +
            font-size: 30pt;
 +
            font-weight: 400;
 +
            text-align: left;
 +
        }
 +
 +
        h21 {
 +
            color: white;
 +
            font-size: 24pt;
 +
            font-weight: 300;
 +
            text-align: left;
 +
        }
 +
 +
        h31 {
 +
            color: white;
 +
            font-size: 20pt;
 +
            font-weight: 200;
 +
            text-align: left;
 +
        }
 +
 +
        #div-text {
 +
padding-top: 50px;
 +
padding-bottom: 150px;
 +
        }
 +
 +
        .div-scrollPic {
 +
            z-index: -999;
 +
            height: 500px;
 +
background-color: transparent;
 +
        }
 +
 +
.scrollContainer {
 +
 +
position: relative;
 +
width: 100%;
 +
}
 +
 +
        .imageEmbed {
 +
            /* creates border around image on each page */
 +
            border-style: solid;
 +
            margin-top: 50px;
 +
            margin-bottom: 50px;
 +
            border-color: #A8A8A8;
 +
            border-width: 2px;
 +
        }
 +
 +
.longText li {
 +
 +
            font-size: 14pt;
 +
            line-height: 2;
 +
            font-weight: 400;
 +
}
 +
 +
        #div-text p {
 +
            /* formats text and lists within .longText */
 +
padding-top: 15px;
 +
padding-bottom: 15px;
 +
            font-size: 14pt;
 +
            line-height: 2;
 +
            font-weight: 400;
 +
        }
 +
 +
        .longText {
 +
            /* fixes width of the text and displays it slighly left of center */
 +
            width: 80%;
 +
max-width: 800px;
 +
min-width: 600px;
 +
margin-left: auto;
 +
            margin-right: auto;
 +
        }
 +
 +
        h4 {
 +
            /* formats intratext section headings */
 +
            font-size: 20pt;
 +
            margin-top: 80px;
 +
        }
 +
 +
        .blockText {
 +
            /* initially hides all of the text on page */
 +
            display: none;
 +
            margin-top: 50px;
 +
        }
 +
 +
        .firstHeader {
 +
            margin-top: 30px;
 +
        }
 +
 +
 +
        /* formats caption and heading of results tables */
 +
        td p {
 +
            padding: 15px 0 15px 0;
 +
            margin: 0 0 30px 0;
 +
            font-size: 12pt;
 +
            line-height: 1.5;
 +
            width: 500px;
 +
        }
 +
 +
        td h51 {
 +
            padding: 0 0 15px 0;
 +
            margin: 25px 0 0px 0;
 +
            font-size: 16pt;
 +
        }
 +
 +
        td {
 +
            vertical-align: top;
 +
        }
 +
 +
        #table-devices {
 +
            width: 600px;
 +
            margin-left: 190px;
 +
            margin-right: auto;
 +
        }
 +
 +
        #h4-first {
 +
            margin-top: 50px;
 +
        }
 +
 +
#div-slideshow {
 +
margin-top: 40px;
 +
margin-bottom: 40px;
 +
margin-left: auto;
 +
margin-right: auto;
 +
width: 800px;
 +
}
 +
 +
#div-slideshow img {
 +
width: 750px;
 +
margin-top: 15px;
 +
margin-bottom: 15px;
 +
margin-left: auto;
 +
margin-right: auto;
 +
border: 2px solid #A8A8A8;
 +
}
 +
 +
#div-dots {
 +
            height: 100px;
 +
        }
 +
 +
#div-dots {
 +
            height: 100px;
 +
        }
 +
 
         </style>
 
         </style>
         <script> $('#iGEM').css('display','block'); </script>
+
<nav>
 +
<a href="https://2016.igem.org/Team:UMaryland"><img src="https://static.igem.org/mediawiki/2016/2/26/T--UMaryland--newlogo.jpeg" id="img-logo" width="128px"></a>
 +
<ul>
 +
<a style="opacity: 0">Fix</a>
 +
<li><a href="https://2016.igem.org/Team:UMaryland/projects">Projects</a></li>
 +
<li><a href="https://2016.igem.org/Team:UMaryland/Part_Collection">Parts</a></li>
 +
<li><a href="https://2016.igem.org/Team:UMaryland/Model">Modeling</a></li>
 +
<li><a href="https://2016.igem.org/Team:UMaryland/outreach">Outreach</a></li>
 +
<li><a href="https://2016.igem.org/Team:UMaryland/notebook">Notebook</a></li>
 +
<li><a href="https://2016.igem.org/Team:UMaryland/about">About Us</a></li>
 +
</ul>
 +
</nav>
 +
<img src="https://static.igem.org/mediawiki/2016/e/e5/T--UMaryland--more.png" id="img-more">
 +
<!-- Nav bar when more button is clicked -->
 +
<div id="div-navResized">
 +
<img src="https://static.igem.org/mediawiki/2016/2/26/T--UMaryland--newlogo.jpeg" id="img-logoResized">
 +
<ul>
 +
<li><a href="https://2016.igem.org/Team:UMaryland/projects">Projects</a></li>
 +
<li><a href="https://2016.igem.org/Team:UMaryland/Part_Collection">Parts</a></li>
 +
<li><a href="https://2016.igem.org/Team:UMaryland/Model">Modeling</a></li>
 +
<li><a href="https://2016.igem.org/Team:UMaryland/outreach">Outreach</a></li>
 +
<li><a href="https://2016.igem.org/Team:UMaryland/notebook">Notebook</a></li>
 +
<li><a href="https://2016.igem.org/Team:UMaryland/about">About Us</a></li>
 +
</ul>
 +
</div>
 +
<div class="scrollContainer">
 +
<div data-parallax="scroll" data-image-src="https://static.igem.org/mediawiki/2016/5/5a/T--UMaryland--il.jpg" class="div-scrollPic" style="height: 650px;">
 +
<div class="titleText">
 +
<style>
 +
</style>
 +
<!-- where background image below titles show -->
 +
<h11>Interlab Study</h11></br>
 +
<h21>Fluorescence Data From 3 Different Constructs with GFP</h21></br>
 +
<h31>Standardizing fluorescence measurements and promoting collaboration. </h31></br>
 +
</div>
 +
</div>
 +
</div>
 +
<!-- Heading text -->
 +
 +
<div id="div-text">
 +
<div class="longText">
 +
<p>The interlab study measures the fluorescence of three different constructs with GFP as well as a positive and negative control. It attempts to standardize the fluorescence measurements by adjusting absorbance values when compared to blanks, reducing the amount of independent variables by controlling for concentration, and adjusting fluorescence values based on the standard curve of FITC.  The goal of this study is to see how the observed fluorescence values compare across the iGEM community to see if the adjustments successfully standardize fluorescence measurements.</p>
 +
<p>As a community of synthetic biologist, a key to the advancement of the field is collaboration among groups. For proper collaboration, we must be able to communicate our findings in ways that are concrete and well defined, making standards essential.</p>
 +
</div>
 +
<div class="longText">
 +
<h4>Tested Devices</h4>
 +
<p>Transform competent cells with Test Devices 1 - 3, positive control, and negative control provided and plate them overnight on chloramphenicol resistant plates.</p>
 +
<ul>
 +
<li>Test Device 1: J23101.B0034.E0040.B0015 in pSB1C3</li>
 +
<li>Test Device 2: J23106.B0034.E0040.B0015 in pSB1C3</li>
 +
<li>Test Device 3: J23117.B0034.E0040.B0015 in pSB1C3</li>
 +
<li>Positive Control Device: I20270 in pSB1C3</li>
 +
<li>Negative Control Device: R0040 in pSB1C3</li>
 +
</ul>
 +
</div>
 +
<div class="longText" id="div-protocol">
 +
<h4>Protocol</h4>
 +
<ol>
 +
<li>Pick two colonies from each plate to inoculate and grow overnight.
 +
</li>
 +
<li>Calibrate the plate reader-
 +
Measure absorbance of LUDOX and water to find a corrected absorbance that can then be used to find a conversion factor for a standard OD600 measurement.</li>
 +
<li>Use FITC to create a standard fluorescence curve -
 +
Measure fluorescence of FITC at different concentrations to generate a curve of fluorescence over concentration.</li>
 +
<li>Measure OD600  of the overnight cultures and create dilutions to put them at an OD600 of 0.02.</li>
 +
<li>Incubate at 37 C and take 100ul samples every hour (from hours 0-6).</li>
 +
<li>Measure OD600 of all the samples and record.</li>
 +
</ol>
 +
</div>
 +
<div class="longText">
 +
<h4>Results</h4>
 +
<div id="div-results">
 +
<ul>
 +
<li>Most samples grew exponentially, device 1 seemed to have little growth.</li>
 +
<li>Negative control and device 3 did not show fluorescence. Positive control, device 1, and device 2 showed increases in fluorescence over time.</li>
 +
<li>The results show that fluorescence per unit of concentration remains relatively constant over time.</li>
 +
</ul>
 +
</div>
 +
<div id="div-slideshow">
 +
<div>
 +
<img class="figure" src="https://static.igem.org/mediawiki/2016/a/ae/T--UMaryland--absorbance.JPG">
 +
<small class="caption">Figure 1. Cell growth versus absorbance.</small>
 +
</div>
 +
<div>
 +
<img class="figure" src="https://static.igem.org/mediawiki/2016/1/17/T--UMaryland--fluorescence.JPG">
 +
<small class="caption">Figure 2. Cell growth versus flourescence.</small>
 +
</div>
 +
<div>
 +
<img class="figure" src="https://static.igem.org/mediawiki/2016/4/43/T--UMaryland--abs-fluor.JPG">
 +
<small class="caption">Figure 3. Cell growth versus absorbance / flourescence.</small>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
    <div id="bot-nav">
 +
         <div id="container">
 +
            <div class="pull-left">
 +
                <a href="mailto:umarylandigem@gmail.com"><p id="contact"> Contact Us </p></a>
 +
            </div>
 +
            <div class="pull-right">
 +
                <ul id="social-media">
 +
                    <li> <a href="https://www.facebook.com/UMarylandiGEM/"> <img src="https://static.igem.org/mediawiki/2016/9/9f/T--UMaryland--fbLogo.jpeg"/> </a> </li>
 +
                    <li> <a href="https://www.instagram.com/umarylandigem/"> <img src="https://static.igem.org/mediawiki/2016/c/ca/T--UMaryland--instalogo.jpg"/> </a> </li>
 +
                </ul>
 +
            </div>
 +
        </div>
 +
<div class="copyright">
 +
            <p id="copyright">© University of Maryland iGEM 2016</p>
 +
</div>
 +
    </div>
 +
</body>
 +
 +
<script>
 +
 +
        $('#div-slideshow').slick({
 +
dots: true
 +
        });
 +
 +
$(window).resize(function() {
 +
var marginTotal = $(window).outerWidth(true) - $('.titleText').outerWidth(false);
 +
var marginLeft = marginTotal / 2;
 +
if (marginLeft > 14) {
 +
$('.longText').css('margin-left', marginLeft);
 +
} else {
 +
$('.longText').css('margin-left', '15px');
 +
}
 +
 +
var marginTitle = $(window).outerWidth(true) - $('.titleText').outerWidth(false);
 +
var marginCheck = marginTitle / 2;
 +
if (marginCheck < 15) {
 +
$('.titleText').css('left','15px');
 +
$('.titleText').css('margin-left','0px');
 +
} else {
 +
$('.titleText').css('left','50%');
 +
$('.titleText').css('margin-left','-40%');
 +
}
 +
})
 +
 +
$(window).load(function() {
 +
            $('body').css('opacity', '1');
 +
var marginTotal = $(window).outerWidth(true) - $('.titleText').outerWidth(false);
 +
var marginLeft = marginTotal / 2;
 +
if (marginLeft > 14) {
 +
$('.longText').css('margin-left', marginLeft);
 +
}else {
 +
$('.longText').css('margin-left', '15px');
 +
}
 +
 +
var marginTitle = $(window).outerWidth(true) - $('.titleText').outerWidth(false);
 +
var marginCheck = marginTitle / 2;
 +
if (marginCheck < 15) {
 +
$('.titleText').css('left','15px');
 +
$('.titleText').css('margin-left','0px');
 +
} else {
 +
$('.titleText').css('left','50%');
 +
$('.titleText').css('margin-left','-40%');
 +
}
 +
})
 +
 +
</script>
 +
      <script>
 +
/* Hiding stupid stuff*/
 +
        $('#top_title').css('display', 'none');
 +
$('#top_menu').css('display', 'none');
 +
        $('#HQ_page').css('display', 'none');
 +
$('#top_menu_under').css('display', 'none');
 +
$('#content').removeClass('mw-body')
 +
    .attr('role','dummy2')
 +
    .attr('id','dummy');
 +
$('#HQ_page').attr("id","iGEM"); //voids all dumb CSS iGEM HQ wrote which overrides our code
 +
$('#mw-content-text').attr("id","overruled").removeClass('mw-content-ltr');
 +
</script>
 +
<script>
 +
// Animation over top nav bar when mouse hovers
 +
$('nav').mouseover(
 +
function () {
 +
$('#img-logo').css('transition', '.35s ease-in')
 +
    .css('opacity', '1');
 +
$('nav ul').addClass("hover");
 +
}
 +
),
 +
$('nav').mouseout(
 +
function () {
 +
var scroll = $(window).scrollTop();
 +
if (scroll > 0) {if ( $(window).width() >= 1090) { var pushed = $('body').hasClass('pushed'); if (pushed == false) {
 +
$('nav ul').removeClass("hover");
 +
$('nav').css('transition', '.5s ease');
 +
    $('#img-logo').css('transition', '.25s ease')
 +
        .css('opacity', '0');
 +
}}}
 +
 
 +
}
 +
),
 +
// Window width effect on top nav bar
 +
$(document).ready(function() {   
 +
function checkWidth() {
 +
if ($(window).width() < 1090 || $('nav').hasClass('pushed')){
 +
$('nav li').css('display', 'none');
 +
$('#img-more').css('display','block');
 +
$('nav ul').addClass("hover");
 +
$('#img-logo').css('transition', '.35s ease-in')
 +
    .css('opacity', '1');
 +
} else {
 +
$('nav li').css('display', 'inline');
 +
$('#img-more').css('display','none');
 +
$('nav ul').removeClass("hover");
 +
if ($(window).scrollTop() > 0) {
 +
$('#img-logo').css('transition', '.25s ease')
 +
    .css('opacity', '0');
 +
$('nav ul').addClass("scrolled");
 +
}
 +
}
 +
}
 +
// Execute on load
 +
    checkWidth();
 +
    // Bind function to window resize
 +
    $(window).resize(checkWidth);
 +
});
 +
// Resized nav bar effect when more icon is clicked
 +
$('#img-more').click(function() {
 +
$('#img-more').toggleClass('pushed');
 +
$('#div-navResized').toggleClass('pushed');
 +
$('nav').toggleClass('pushed');
 +
$('nav img').toggleClass('pushed');
 +
$('body').toggleClass('pushed');
 +
if ($(window).width() >= 1090) { var pushed = $('body').hasClass('pushed'); if (pushed == false){
 +
$('nav li').css('display', 'inline');
 +
$('#img-more').css('display','none');
 +
$('nav ul').removeClass("hover");
 +
}}
 +
});
 +
// Scrolling animation for top nav bar
 +
var nav = $('nav ul');
 +
$(window).scroll(function() {
 +
var scroll = $(window).scrollTop();
 +
if (scroll > 0) { if ( $(window).width() >= 1090) {
 +
nav.addClass("scrolled");
 +
nav.removeClass("hover");
 +
$('#img-logo').css('transition', '.25s ease')
 +
    .css('opacity', '0');
 +
}} else {
 +
nav.removeClass("scrolled");
 +
$('#img-logo').css('transition', '.35s ease-in')
 +
    .css('opacity', '1');
 +
}
 +
});
 +
</script>
 +
        <script> $('#iGEM').css('display','block');
 +
 +
$('body').css('display', 'block');</script>
 
<script>
 
<script>
 
$(document).ready(function(){
 
$(document).ready(function(){
  $('#div-figures').slick({
+
   
  });
+
 
});
 
});
 
 
Line 670: Line 799:
 
});
 
});
 
 
$('#div-protocol li').css('display', 'none');
 
 
var element_position = $('#div-protocol').offset().top;
 
 
var toggle = 1;
 
var toggle = 1;
  
$(window).on('scroll', function() {
+
var y_scroll_pos = window.pageYOffset;
+
var scroll_pos_test = element_position - 400;
+
 
+
if(y_scroll_pos > scroll_pos_test) {
+
if ( toggle == 1){
+
$('#div-protocol li').each(function(index) {
+
$('#div-protocol').css('overflow','hidden');
+
$(this).delay(200*index).queue(function() { $(this).css('display', 'list-item').animateCss('slideInRight').dequeue(); })
+
//$(this).delay(200*index).queue(function() { $(this).dequeue(); })
+
})
+
}
+
}
+
});
+
 
</script>
 
</script>
<script src="http://pixelcog.github.io/parallax.js/js/parallax.min.js">
 
    </script>
 
 
</html>
 
</html>

Latest revision as of 03:06, 18 October 2016

</div> </div> Human Practices

Interlab Study
Fluorescence Data From 3 Different Constructs with GFP
Standardizing fluorescence measurements and promoting collaboration.

The interlab study measures the fluorescence of three different constructs with GFP as well as a positive and negative control. It attempts to standardize the fluorescence measurements by adjusting absorbance values when compared to blanks, reducing the amount of independent variables by controlling for concentration, and adjusting fluorescence values based on the standard curve of FITC. The goal of this study is to see how the observed fluorescence values compare across the iGEM community to see if the adjustments successfully standardize fluorescence measurements.

As a community of synthetic biologist, a key to the advancement of the field is collaboration among groups. For proper collaboration, we must be able to communicate our findings in ways that are concrete and well defined, making standards essential.

Tested Devices

Transform competent cells with Test Devices 1 - 3, positive control, and negative control provided and plate them overnight on chloramphenicol resistant plates.

  • Test Device 1: J23101.B0034.E0040.B0015 in pSB1C3
  • Test Device 2: J23106.B0034.E0040.B0015 in pSB1C3
  • Test Device 3: J23117.B0034.E0040.B0015 in pSB1C3
  • Positive Control Device: I20270 in pSB1C3
  • Negative Control Device: R0040 in pSB1C3

Protocol

  1. Pick two colonies from each plate to inoculate and grow overnight.
  2. Calibrate the plate reader- Measure absorbance of LUDOX and water to find a corrected absorbance that can then be used to find a conversion factor for a standard OD600 measurement.
  3. Use FITC to create a standard fluorescence curve - Measure fluorescence of FITC at different concentrations to generate a curve of fluorescence over concentration.
  4. Measure OD600 of the overnight cultures and create dilutions to put them at an OD600 of 0.02.
  5. Incubate at 37 C and take 100ul samples every hour (from hours 0-6).
  6. Measure OD600 of all the samples and record.

Results

  • Most samples grew exponentially, device 1 seemed to have little growth.
  • Negative control and device 3 did not show fluorescence. Positive control, device 1, and device 2 showed increases in fluorescence over time.
  • The results show that fluorescence per unit of concentration remains relatively constant over time.
Figure 1. Cell growth versus absorbance.
Figure 2. Cell growth versus flourescence.
Figure 3. Cell growth versus absorbance / flourescence.