Difference between revisions of "Team:UMaryland/Engagement"

 
(83 intermediate revisions by 2 users not shown)
Line 1: Line 1:
</div></div>
+
 
 +
</div>
 +
</div>
 
<html lang="en">
 
<html lang="en">
 +
 
<head>
 
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
+
    <script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
         $('body').css('opacity', '0');
        <script>  
+
    </script>
         $(body).css('display','none');  
+
    <script src="https://static.igem.org/mediawiki/2016/9/95/T--UMaryland--html5shiv.txt"></script>
        </script>
+
    <script src="https://static.igem.org/mediawiki/2016/c/ce/T--UMaryland--parallax.txt"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+
    <script src="https://static.igem.org/mediawiki/2016/d/d3/T--UMaryland--slick.txt" type="text/javascript"></script>
<script type="text/javascript">
+
    <title>Human Practices</title>
if (typeof jQuery == 'undefined') {
+
</head>
document.write(unescape("%3Cscript src='js/jquery-1.10.2.min.js' type='text/javascript'%3E%3C/script%3E"));
+
 
}
+
<body>
</script>
+
    <style>
<link href='https://fonts.googleapis.com/css?family=Exo|Lora' rel='stylesheet' type='text/css'>
+
        @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');
 +
        }
 
          
 
          
<link href='https://fonts.googleapis.com/css?family=Raleway:400,200' rel='stylesheet' type='text/css'>
+
        @font-face {
<link href='http://sachinchoolur.github.io/lightGallery/lightgallery/css/lightgallery.css' rel='stylesheet' type='text/css'>
+
            font-family: 'Lora';
<title>Building with Biology</title>
+
            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 24: 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">
+
<style>
</script>
+
@charset "UTF-8";
</head>
+
 
<body>
+
/*!
 +
* animate.css -http://daneden.me/animate
 +
* Version - 3.5.1
 +
* Licensed under the MIT license - http://opensource.org/licenses/MIT
 +
*
 +
* Copyright (c) 2016 Daniel Eden
 +
*/
 +
 
 +
.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}
 +
</style>
 +
 
<style>
 
<style>
        #bars_item {
+
/* Permanent bottom bar */
            display: none;
+
        }
+
#bot-nav {
 +
    background-color: #f9f9f9;   
 +
    border-top: 1px solid #f5f5f5;
 +
    position: absolute;
 +
    width: 100%;
 +
    height: 100px;
 +
    display: block;
 +
    color: black;
 +
    font-size: 12pt;
 +
    font-family: 'Lora', serif;
 +
    z-index: -1;
 +
}
  
        #sideMenu {
+
#social-media {
            display: none;
+
width: 100%;
        } 
+
margin:0 0 0 0;
        #bodyContent, #content, html, body, #globalWrapper, #iGEM, #overruled {
+
}
            width: 100%;
+
.pull-right a {
            height: 100%;
+
padding-right: 0px !important;
            padding: 0 0 0 0;
+
}
            border: none;
+
            margin: 0 0 0 0;
+
            background: transparent;
+
        }
+
  
         #top_title {
+
.copyright {
 +
text-align: center;
 +
width: 272px;
 +
height: 30px;
 +
margin-top: -20px;
 +
margin-left: auto;
 +
margin-right: auto;
 +
}
 +
 
 +
.pull-left {
 +
margin-top: -3px;
 +
width: 83px;
 +
margin-left: 30px;
 +
margin-right: auto;
 +
display: inline;
 +
height: 34px;
 +
}
 +
 
 +
.pull-left p {
 +
margin: 0 0 0 0;
 +
padding: 0 0 0 0 !important;
 +
line-height: 0px !important;
 +
}
 +
 
 +
.pull-right {
 +
width: 83px;
 +
margin-right: 30px;
 +
margin-left: auto;
 +
}
 +
 
 +
#copyright {
 +
    text-align: center;
 +
left:auto;
 +
right: auto;
 +
width: 100%;
 +
padding: 0 0 0 0;
 +
margin-top: 0px;
 +
float:left;
 +
}
 +
 
 +
#container {
 +
    max-width: 1200px;
 +
    margin-left: auto;
 +
    margin-right: auto;
 +
margin-top: 40px;
 +
}
 +
 
 +
#container img {
 +
    height: 20px;
 +
    width: 20px;
 +
    -webkit-filter: grayscale(100%);
 +
    filter: grayscale(100%);
 +
}
 +
 
 +
#bot-nav img:hover {
 +
    -webkit-filter: grayscale(0%);
 +
    filter: grayscale(0%);
 +
}
 +
 
 +
#container li {
 +
    display: inline;
 +
list-style:none;
 +
padding-right: 25px;
 +
}
 +
 
 +
.pull-left {
 +
float:left;
 +
}
 +
 
 +
#bot-nav a {
 +
    text-decoration: none;
 +
    color: black;
 +
}
 +
 
 +
#contact:hover {
 +
    text-shadow: .1px .1px black;
 +
}
 +
</style>
 +
    <style>
 +
        /* Navbar and body setup */
 +
         #bars_item {
 
             display: none;
 
             display: none;
            line-height: inherit;
 
 
         }
 
         }
  
 
         #sideMenu {
 
         #sideMenu {
 
             display: none;
 
             display: none;
         }
+
         }    
  
         /* Navbar and body setup */
+
         #content {
        body {
+
                margin-top: 0px;
            font-family: 'Lora', serif;
+
            overflow-x: hidden;
+
 
         }
 
         }
  
         #content {
+
         body {
             margin-top: 0px;
+
            /* Enforces font on the entire page, colored black by default
 +
              Makes background off-white slightly to improve visibility with gray font */
 +
            font-family: 'Raleway', sans-serif;
 +
            color: black;
 +
            background-color: #FEFFFA;
 +
            overflow-x:hidden;
 +
            margin-right: auto;
 +
             margin-left: auto;
 
         }
 
         }
  
Line 82: Line 209:
 
             margin-top: 18px;
 
             margin-top: 18px;
 
         }  
 
         }  
 
        element.style {
 
            text-decoration: none;
 
        }
 
  
 
         nav a {
 
         nav a {
Line 93: Line 216:
 
         }
 
         }
  
         nav a:visited {
+
         a:visited {
 
             color: black;
 
             color: black;
        }
 
 
        nav a:hover {
 
            opacity: .7;
 
            text-decoration: none;
 
 
         }
 
         }
  
Line 112: Line 230:
 
             margin-right: 20px;
 
             margin-right: 20px;
 
         }
 
         }
       
+
 
         nav a:focus {
+
         nav a:hover, nav a:focus {
 +
            opacity: .7;
 
             text-decoration: none;
 
             text-decoration: none;
 
         }
 
         }
  
 
         /* Nav bar when more icon is clicked */
 
         /* Nav bar when more icon is clicked */
 
 
         #div-navResized {
 
         #div-navResized {
 
             font-size: 20pt;
 
             font-size: 20pt;
Line 151: Line 269:
 
         }
 
         }
  
        /* Permanent bottom bar */
+
         #copyrightResized {
         #bot-nav {
+
             margin-top: -23px;
            background-color: #f9f9f9;   
+
            border-top: 1px solid #f5f5f5;
+
            position: absolute;
+
            width: 100%;
+
            height: 100px;
+
            display: block;
+
             margin-top: 50px;
+
            color: black;
+
            font-size: 12pt;
+
            font-family: 'Lora', serif;
+
            z-index: -1;
+
 
         }
 
         }
  
         #social-media {
+
         #contactResized {
            width: 100%;
+
             margin-top: -10px;
             margin:0 0 0 0;
+
 
         }
 
         }
  
        .pull-right a {
+
         #contactResized:hover {
            padding-right: 0px !important;
+
        }
+
 
+
        .copyright {
+
            text-align: center;
+
            width: 272px;
+
            height: 30px;
+
            margin-top: -20px;
+
            margin-left: auto;
+
            margin-right: auto;
+
        }
+
 
+
        .pull-left {
+
            margin-top: -3px;
+
            width: 83px;
+
            margin-left: 30px;
+
            margin-right: auto;
+
            display: inline;
+
            height: 34px;
+
        }
+
 
+
        .pull-left p {
+
            margin: 0 0 0 0;
+
            padding: 0 0 0 0 !important;
+
            line-height: 0px !important;
+
        }
+
 
+
        .pull-right {
+
            width: 83px;
+
            margin-right: 30px;
+
            margin-left: auto;
+
        }
+
 
+
         #copyright {
+
            text-align: center;
+
            left:auto;
+
            right: auto;
+
            width: 100%;
+
            padding: 0 0 0 0;
+
            margin-top: 0px;
+
            float:left;
+
        }
+
 
+
        #container {
+
            max-width: 1200px;
+
            margin-left: auto;
+
            margin-right: auto;
+
            margin-top: 40px;
+
        }
+
 
+
        #container img {
+
            height: 20px;
+
            width: 20px;
+
            -webkit-filter: grayscale(100%);
+
            filter: grayscale(100%);
+
        }
+
 
+
        #bot-nav img:hover {
+
            -webkit-filter: grayscale(0%);
+
            filter: grayscale(0%);
+
        }
+
 
+
        #container li {
+
            display: inline;
+
            list-style:none;
+
            padding-right: 25px;
+
        }
+
 
+
 
+
        .pull-left {
+
            float:left;
+
        }
+
 
+
        #bot-nav a {
+
            text-decoration: none;
+
            color: black;
+
        }
+
 
+
        #contact:hover {
+
 
             text-shadow: .1px .1px black;
 
             text-shadow: .1px .1px black;
        }
 
 
 
        /* Background of page */
 
 
        html {
 
            background-color: rgba(0, 0, 0, 0.06);
 
        }
 
 
        /* Start Page Specific CSS */
 
 
        /* Title */
 
        h1, h4 {
 
            position: absolute;
 
            top: 372px;
 
            left: 117px;
 
            width: 100%;
 
            border-bottom: none;
 
            color: white;
 
            font-family: 'Lora', serif;
 
            font-weight: normal !important;
 
            overflow: visible;
 
        }
 
 
        h1 {
 
            background: rgb(0, 0, 0); /* fallback color */
 
            background: rgba(0, 0, 0, 0.7);
 
            padding-left: 10px;
 
            padding-bottom: 14px;
 
        }
 
 
        h2, h3 {
 
            position: absolute;
 
            top: 281px;
 
            left: 117px;
 
            width: 100%;
 
            border-bottom: none;
 
            color: white;
 
            font-family: 'Lora', serif;
 
            border-bottom: none;
 
            font-weight: normal !important;
 
            overflow: visible;
 
        }
 
 
        h3 span {
 
            color: white;
 
            padding-bottom: 4px;
 
            padding-right: 10px;
 
            padding-left: 10px;
 
            padding-top: 1px;
 
            letter-spacing: -1px; 
 
            background: rgb(0, 0, 0); /* fallback color */
 
            background: rgba(0, 0, 0, 0.7);
 
        }
 
 
        h4 span {
 
            color: white;
 
            padding-bottom: 4px;
 
            padding-right: 10px;
 
            padding-left: 10px;
 
            padding-top: 6px;
 
            letter-spacing: -1px; 
 
            background: rgb(0, 0, 0); /* fallback color */
 
            background: rgba(0, 0, 0, 0.7);
 
        }
 
 
        h2 {
 
            max-width: 759px;
 
            min-width: 759px;
 
            background: rgb(0, 0, 0); /* fallback color */
 
            background: rgba(0, 0, 0, 0.7);
 
            padding-left: 10px;
 
            padding-bottom: 22px;
 
        }
 
       
 
        #h1 {
 
            width: 250px;
 
            font-size: 30pt;
 
        }
 
 
        #h2 {
 
            max-width: 702px;
 
            min-width: 702px;
 
            font-size: 30pt;
 
        }
 
#h25 {
 
            max-width: 420px;
 
            min-width: 420px;
 
            font-size: 30pt;
 
        }
 
 
        h4 {
 
            font-size: 24pt;
 
        }
 
 
        h3 {
 
            font-size: 24pt;
 
            margin-top: -1px;
 
        }
 
 
        /* Content */ 
 
 
        .div-content img {
 
            width: 457px;
 
            height: 305px;
 
        }
 
 
        .div-content p {
 
            margin-left: 40px;
 
            max-width: 500px;
 
            font-size: 12pt;
 
            line-height: 2;
 
            font-weight: 400;
 
            text-align: left;
 
        }
 
 
        table {
 
            background: none;
 
            border: none;
 
        }
 
 
        #table-selector1 {
 
            /* formats the table containing nav elements to be centered, addes space on top / bottom */
 
            margin-top: 100px;
 
            margin-bottom: 30px;
 
        }
 
 
        #table-selector1 th, #table-selector2 th {
 
            /* makes each cell of nav evenly spaced */
 
            text-align: center;
 
            width: 500px;
 
height: 40px;
 
        }
 
 
        th p {
 
            /* formats text inside table of navigational elements */
 
            /* makes cursor emulate a link to show it's clickable */
 
            font-weight: 400;
 
            cursor: pointer;
 
            margin: 0 0 0 0;
 
        }
 
 
        #table-selector1 th p {
 
            font-size: 24pt;
 
            font-family: 'Raleway', sans-serif;
 
            padding: 5px 0px 15px 0px;
 
        }
 
 
        #table-selector2 th p {
 
            font-size: 12pt;
 
            padding: 5px 0px 5px 0px;
 
        }
 
 
        th p:hover {
 
            /* makes links bold when hovered to show it is a link */
 
            font-weight: 800;
 
        }
 
 
        #table-selector1, #table-selector2 {
 
            width: 1028px;
 
            margin-left: auto;
 
            margin-right: auto;
 
            /* makes a single border between two cells rather than two */
 
            border-collapse: collapse;
 
        }
 
 
        #div-lowertable {
 
            margin-top: -31px;
 
min-height: 500px;
 
margin-bottom: 30px;
 
        }
 
 
        .profiles {
 
            display: none;
 
            width: 1175px;
 
            margin-top: 50px;
 
            margin-right: auto;
 
            margin-left: auto;
 
        }
 
 
        #Info {
 
            margin-top: 100px;
 
            margin-left: auto;
 
            margin-right: auto;
 
            margin-bottom: 50px;
 
            width: 970px;
 
        }
 
 
        #Info p {
 
            font-size: 15pt;
 
            line-height: 2;
 
        }
 
 
        #Info p, #table-selector2 p {
 
            font-family: 'Raleway', sans-serif;
 
            text-align: center;
 
        }
 
 
        #th-building {
 
            padding-right: 13px;
 
        }
 
 
        /* Classes */
 
 
        .pInfo {
 
            text-align: left;
 
        }
 
 
        .image {
 
          position: relative;
 
          width: 100%; /* for IE 6 */
 
        }
 
 
        /* creates a solid gray border between elements of navigational element */
 
        .borderRight {
 
            border-right: 2px solid #A8A8A8;
 
            border-bottom: 4px solid #A8A8A8;
 
        }
 
 
        .borderLeft {
 
            border-left: 2px solid #A8A8A8;
 
            border-bottom: 1px solid #A8A8A8;
 
        }
 
 
        .borderBoth {
 
            border-left: 2px solid #A8A8A8;
 
            border-right: 2px solid #A8A8A8;
 
            border-bottom: 1px solid #A8A8A8;
 
        }
 
 
        .description {
 
            margin-top: 200px;
 
            min-width: 970px;
 
        }
 
 
        .border {
 
            border-bottom: 1px black;
 
        }
 
 
        .margin {
 
            min-width: 1180px;
 
            margin-right: auto;
 
            margin-left: auto;
 
            padding-left: 5px 
 
 
         }
 
         }
  
Line 508: Line 291:
  
 
         #div-navResized.pushed a:hover {
 
         #div-navResized.pushed a:hover {
 +
            opacity: .7;   
 
             text-decoration: none;
 
             text-decoration: none;
            opacity: .7;
 
 
         }
 
         }
  
Line 540: Line 323:
 
         /* Logo */
 
         /* Logo */
 
         #img-logo {
 
         #img-logo {
 +
            width: 260px;
 
             float: left;
 
             float: left;
 
             position: fixed;
 
             position: fixed;
 
             margin-top: 4px;
 
             margin-top: 4px;
 
             margin-left: 65px;
 
             margin-left: 65px;
            opacity: 1.0;
 
        }
 
 
        /* iGEM logo */
 
        #img-igemlogo {
 
            width: 60px;
 
            float: right;
 
            position: fixed;
 
            margin-top: 1px;
 
 
             opacity: 1.0;
 
             opacity: 1.0;
 
         }
 
         }
Line 565: Line 340:
 
             right: 15px;
 
             right: 15px;
 
             z-index: 2;
 
             z-index: 2;
             margin-top: -11px;
+
             margin-top: -12px;
 
         }
 
         }
  
        #img-education, #img-portdiscovery {
+
         /* Logo when more button is clicked */
            z-index: -999;
+
            height: 600px;
+
        }
+
 
+
         /* Logos when more button is clicked */
+
  
 
         #img-logoResized {
 
         #img-logoResized {
             width: 200px;
+
             width: 300px;
 
             display: block;
 
             display: block;
 
             margin-right: auto;
 
             margin-right: auto;
 
             margin-left: auto;
 
             margin-left: auto;
             margin-top: -165px;
+
             margin-top: -160px;
            padding-right: 40px;
+
 
         }
 
         }
     
+
 
         .centered {
+
         </style>
            margin-left:auto;
+
            margin-right:auto;
+
<style>
width: 1200px;
+
.caption {
 +
font-weight: bold;
 +
margin-left: 25px;
 +
}
 +
 +
#div-figures{
 +
padding-bottom: 100px;
 +
font-size: 14pt;
 +
}
 +
 +
.titleText {
 +
position: absolute;
 +
top: 300px;
 +
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;
 
             text-align: left;
 
         }
 
         }
  
         /* tell the container's children to float left: */
+
         h21 {
        .float-my-children > * {
+
            color: white;
             float:right;
+
            font-size: 24pt;
             margin-right:70px;
+
             font-weight: 300;
 +
             text-align: left;
 
         }
 
         }
  
         /* this is called a clearfix. it makes sure that the container's children floats are cleared, without using extra markup */
+
         h31 {
 +
            color: white;
 +
            font-size: 20pt;
 +
            font-weight: 200;
 +
            text-align: left;
 +
        }
  
         .clearfix {
+
         #div-text {
            *zoom:1 /* for IE */
+
padding-top: 50px;
 +
padding-bottom: 150px;
 
         }
 
         }
  
         .clearfix:before,
+
         .div-scrollPic {
        .clearfix:after {
+
             z-index: -999;
             content: " ";
+
             height: 500px;
             display: table;
+
background-color: transparent;
 
         }
 
         }
  
        .clearfix:after {
+
.scrollContainer {
             clear: both;
+
 +
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;
 
         }
 
         }
  
</style>
+
        #div-text p, .longText li {
         <script>
+
            /* formats text and lists within .longText */
/* Hiding stupid stuff*/
+
padding-top: 15px;
$(document).ready(function() {
+
padding-bottom: 15px;
                $('#top_title').css('display', 'none');
+
            font-size: 14pt;
$('#top_menu').css('display', 'none');
+
            line-height: 2;
//$('#top_menu_14').css('display', 'none');
+
            font-weight: 400;
                $('#HQ_page').css('display', 'none');
+
text-align: left;
$('#top_menu_under').css('display', 'none');
+
         }
        });
+
 
$('#HQ_page').attr("id","iGEM"); //voids all dumb CSS iGEM HQ wrote which overrides our code
+
        .longText {
$('#mw-content-text').attr("id","overruled").removeClass('mw-content-ltr');
+
            /* fixes width of the text and displays it slighly left of center */
</script>
+
            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;
 +
        }
 +
 
 +
        .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;
 +
        }
 +
 +
#div-activities {
 +
position: relative;
 +
margin-left: auto;
 +
margin-right: auto;
 +
margin-top: 40px;
 +
margin-bottom: 40px;
 +
padding-bottom: 30px;
 +
width: 950px;
 +
}
 +
 +
.profiles {
 +
border: 2px solid #A8A8A8;
 +
width: 900px;
 +
margin-left: 20px;
 +
margin-right: 20px;
 +
-webkit-border-radius: 5px;
 +
-moz-border-radius: 5px;
 +
border-radius: 5px;
 +
}
 +
 +
.profiles p {
 +
line-height: 1.5em !important;
 +
font-size: 12pt !important;
 +
padding: 0 0 0 0 !important;
 +
margin-left: 0px !important;
 +
margin-top: 0px !important;
 +
margin-bottom: 0px !important;
 +
margin-right: 15px !important;
 +
}
 +
 +
.profiles strong {
 +
margin-left: 15px;
 +
margin-top: 15px;
 +
font-size: 14pt;
 +
display: block;
 +
line-height: 2em;
 +
 +
}
 +
 +
.profiles img {
 +
margin-left: 15px;
 +
margin-bottom: 15px;
 +
width: 400px;
 +
float: left;
 +
margin-right: 20px;
 +
}
 +
 +
#div-slideshow {
 +
margin-top: 40px;
 +
margin-bottom: 40px;
 +
margin-left: auto;
 +
margin-right: auto;
 +
width: 800px;
 +
padding-bottom: 70px;
 +
}
 +
 +
#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-text a, #div-text a:visited{
 +
color: blue;
 +
}
 +
 +
        </style>
 
<nav>
 
<nav>
<img src="https://static.igem.org/mediawiki/2016/2/26/T--UMaryland--newlogo.jpeg" id="img-logo" width="260px">
+
<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>
 
<ul>
 
<a style="opacity: 0">Fix</a>
 
<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/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/parts">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/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/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/notebook">Notebook</a></li>
Line 646: Line 576:
 
<ul>
 
<ul>
 
<li><a href="https://2016.igem.org/Team:UMaryland/projects">Projects</a></li>
 
<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/parts">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/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/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/notebook">Notebook</a></li>
Line 655: Line 583:
 
</ul>
 
</ul>
 
</div>
 
</div>
<div id="div-title" class="image">
+
<div class="scrollContainer">
<div data-parallax="scroll" data-image-src="https://static.igem.org/mediawiki/2016/9/90/T--UMaryland--educationMain.jpg"id="img-education">
+
<div data-parallax="scroll" data-image-src="https://static.igem.org/mediawiki/2016/9/90/T--UMaryland--educationMain.jpg" class="div-scrollPic" style="height: 650px;">
                </div>
+
<div class="titleText">  
<h1 id="h1"><span>Engagement </span> </h1>
+
<style>
        <h4><br/><br/><br/><span>Furthering the dialogue with the public about synthetic biology</span></h4>
+
</style>
+
<!-- where background image below titles show -->
 +
<h11>Engagement</h11></br>
 +
<h21>Furthering the dialogue with the public about synthetic biology</h21></br>
 +
</div>
 +
</div>
 
</div>
 
</div>
    <div class="image">
+
<div id="div-text"> <!-- Start of main text of page -->
        <div data-parallax="scroll" data-image-src="https://static.igem.org/mediawiki/2016/5/50/T--UMaryland--portdiscover.jpg" id="img-portdiscovery">
+
<!-- Heading text -->
                    </div>
+
<h2 id="h2"><span>Building with Biology: Port Discovery </span> </h2>
+
<div class="longText" style="margin-bottom: 30px;">
        <h3><br/><br/><br/><span>July 30th, 2016</span></h3>  
+
<p>To learn about other potential applications of our project, we interviewed cattle farmers about their awareness of cow’s methane contribution and their environmental practices. With our information, we prepared and distributed a brochure that informed animal farmers how to reduce greenhouse gas emissions. We also reached out to the public at farmer’s markets and gauged their support on topics like GMO’s and global warming. We discussed our project and the relevant environmental issues. Finally, to garner interest for iGEM and synthetic biology, we engaged future scientists at different points in their careers by performing activities with kids at a Building with Biology event in Baltimore, introducing synthetic biology to local high schoolers, and leading activities for college students at a STEM expo at the University of Maryland.</p>
    </div>
+
</div>
    <div id="Info" class="centered">
+
<div class="scrollContainer">
<p class="pInfo"> We volunteered at the Building with Biology Event held at Port Discovery in Baltimore, MD to raise awareness about synthetic biology among children 8 and up. We manned six tables with different activities involving synthetic biology, which are described in more depth below. </p>
+
<div data-parallax="scroll" data-image-src="https://static.igem.org/mediawiki/2016/5/50/T--UMaryland--portdiscover.jpg" class="div-scrollPic">
    </div>
+
<div class="titleText" >
    <div class="margin">
+
<h21>Building with Biology: Port Discovery</h21></br>
    <table id="table-selector1"> <!-- Table of navigational links -->
+
<h31>July 30th, 2016</h31>
<thead>
+
</div>
<!-- .border classes signify where border needs to be drawn -->
+
</div>
<!-- navigator class trigger javascript on that element    -->
+
</div>
<!-- data-select attribute sends to script which element    -->
+
<div class="longText">
<!-- was clicked -->
+
<p>We volunteered at the Building with Biology Event held at Port Discovery in Baltimore, MD to raise awareness about synthetic biology among children 8 and up. We manned six tables with different activities involving synthetic biology, which are described in more depth below.
<th class="borderRight navigator" id="th-building" data-select="building"><p>Building with Biology Activities</p></th>
+
</p>
                <th class="borderLeft navigator" id="th-ours" data-select="ours"><p>Our Activities</p></th>
+
</div>
</thead>
+
<div class="longText">
</table>
+
<div id="div-activities">
    </div>
+
                <div id="div-super" class="profiles">
    <div id = "div-lowertable">
+
<strong>Super Organism!</strong>
        <div id="div-building">
+
                     <img src="https://static.igem.org/mediawiki/2016/1/10/T--UMaryland--superorganisms.jpg" id="img-super" />
            <div class="margin">
+
                      
            <table id="table-selector2"> <!-- Table of navigational links -->
+
                        <p>At this station, visitors were introduced to two catastrophic situations that they needed to solve using their imaginations: 1) Their friend fell off of a skyscraper, and 2) Their friend caused a massive oil spill in the ocean. To tackle the first problem, kids designed a superhero that could shoot spiderwebs or fly to ultimately catch their friend. For the second problem, kids designed a super bacteria that could clean the ocean by detecting, degrading, or digesting oil. This activity served as a introduction of the possibilites of synthetic biology and genetic engineering.
                <thead>
+
                         </p>
                    <th class="borderRight belowNav" id="th-super" data-select="super"><p>Super Organisms!</p></th>
+
                   
                    <th class="borderBoth belowNav" id="th-parts" data-select="parts"><p>Kit of Parts</p></th>
+
                    <th class="borderBoth belowNav" id="th-bistro" data-select="bistro"><p>Bio Bistro</p></th>
+
                    <th class="borderLeft belowNav" id="th-tech" data-select="tech"><p>Tech Tokens</p></th>
+
                </thead>
+
            </table>
+
            </div>
+
          <div class="div-content">
+
                <div id="div-super" class="profiles center clearfix float-my-children" style="display:block">
+
                     <img src="https://static.igem.org/mediawiki/2016/1/10/T--UMaryland--superorganisms.jpg" id="img-super"/img>
+
                     <div><p>At this station, visitors were introduced to two catastrophic situations that they needed to solve using their imaginations: 1) Their friend fell off of a skyscraper, and 2) Their friend caused a massive oil spill in the ocean. To tackle the first problem, kids designed a superhero that could shoot spiderwebs or fly to ultimately catch their friend. For the second problem, kids designed a super bacteria that could clean the ocean by detecting, degrading, or digesting oil. This activity served as a introduction of the possibilites of synthetic biology and genetic engineering.
+
                         </p></div>
+
 
                 </div>
 
                 </div>
                 <div id="div-parts" class="profiles center clearfix float-my-children">
+
                 <div id="div-parts" class="profiles">
                     <img src="https://static.igem.org/mediawiki/2016/1/1f/T--UMaryland--kitofparts.jpg" id="img-parts"/img>
+
<strong>Kit of Parts</strong>
                     <div> <p> Visitors would learn about the concept of BioBricks and versatility of engineering cells to solve global issues. They used a cell model made of wooden poles and color-coded parts that fit on the poles. Each color had a different function like red for production and blue for sensing. A visitor would pick a challenge card with an area of research on it ranging from making synthetic blood to treating malaria. Then she would make a cell that would solve the problem using a solution description on the back of the card. </p> </div>
+
                     <img src="https://static.igem.org/mediawiki/2016/1/1f/T--UMaryland--kitofparts.jpg" id="img-parts" />
 +
                      
 +
                        <p> Visitors would learn about the concept of BioBricks and versatility of engineering cells to solve global issues. They used a cell model made of wooden poles and color-coded parts that fit on the poles. Each color had a different function like red for production and blue for sensing. A visitor would pick a challenge card with an area of research on it ranging from making synthetic blood to treating malaria. Then she would make a cell that would solve the problem using a solution description on the back of the card. </p>
 +
                   
 
                 </div>
 
                 </div>
                 <div id="div-bistro" class="profiles center clearfix float-my-children">
+
                 <div id="div-bistro" class="profiles">
                     <img src="https://static.igem.org/mediawiki/2016/d/d2/T--UMaryland--biobistro.jpg" id="img-bistro"/img>
+
<strong>Bio Bistro</strong>
                     <div><p>Eat it? Think about it? No way? Visitors were introduced to a variety of engineered foods, both currently available and in development, and asked their opinion on consuming the goods. Items included vanilla flavoring, caffeine, and milk synthesized by yeast, a food pill that provided all daily nutrients, golden rice, and meat created in a lab. Participants were also introduced to different ways we have modified agriculture like selective breeding, genetic engineering, and synthetic biology.</p></div>
+
                     <img src="https://static.igem.org/mediawiki/2016/d/d2/T--UMaryland--biobistro.jpg" id="img-bistro" />
 +
                      
 +
                        <p>Eat it? Think about it? No way? Visitors were introduced to a variety of engineered foods, both currently available and in development, and asked their opinion on consuming the goods. Items included vanilla flavoring, caffeine, and milk synthesized by yeast, a food pill that provided all daily nutrients, golden rice, and meat created in a lab. Participants were also introduced to different ways we have modified agriculture like selective breeding, genetic engineering, and synthetic biology.</p>
 +
                   
 
                 </div>
 
                 </div>
                 <div id="div-tech" class="profiles center clearfix float-my-children">
+
                 <div id="div-tech" class="profiles">
                     <img src="https://static.igem.org/mediawiki/2016/8/88/T--UMaryland--techtokens.jpg" id="img-tech"/img>
+
<strong>Tech Tokens</strong>
                     <div><p> Visitors would be introduced to a wide range of applications for synthetic biology to start a conversation among the visitors on the level of importance of each application. Each visitor at the table was given a stack of colored coins to represent their opinion. They would place all their coins on the application(s) most important to them and then we would all discuss their choices and reasoning. An additional activity was to give each person at the table a character card with occupations ranging from president of the U.S. to Canadian college student. They would repeat the process of placing coins, but this time in the mindset of the occupation they were given. </p></div>
+
                     <img src="https://static.igem.org/mediawiki/2016/8/88/T--UMaryland--techtokens.jpg" id="img-tech" />
 +
                      
 +
                        <p> Visitors would be introduced to a wide range of applications for synthetic biology to start a conversation among the visitors on the level of importance of each application. Each visitor at the table was given a stack of colored coins to represent their opinion. They would place all their coins on the application(s) most important to them and then we would all discuss their choices and reasoning. An additional activity was to give each person at the table a character card with occupations ranging from president of the U.S. to Canadian college student. They would repeat the process of placing coins, but this time in the mindset of the occupation they were given. </p>
 +
                   
 
                 </div>
 
                 </div>
            </div>
+
                <div id="div-bacteria" class="profiles">
        </div>
+
<strong>Build Your Own Bacteria</strong>
        <div id="div-ours" style="display: none">
+
                     <img src="https://static.igem.org/mediawiki/2016/8/8b/T--UMaryland--buildyourownbacteria.jpg" id="img-super" />
            <div class="margin">
+
                      
            <table id="table-selector2"> <!-- Table of navigational links -->
+
                        <p>This station combines science, art and play to present an analogy for synthetic biology. First, participants used legos to build their own plasmid, mixing and matching different parts. Different legos were used as an analogy for BioBricks, and contained pieces such as promoters and terminators. Visitors were able to pick what physical characteristics they wanted their bacteria to have, such as body color and number of legs, by picking the appropriate lego BioBricks. Then, participants were able to draw the bacteria they just built on our worksheet. </p>
                <thead>
+
                   
<th class="borderRight belowNav" id="th-bacteria" data-select="bacteria"><p>Build Your Own Bacteria</p></th>
+
<th class="borderBoth belowNav" id="th-broth" data-select="broth"><p>Make Your Own LB Broth</p></th>                
+
                <th class="borderLeft belowNav" id="th-color" data-select="color"><p>Colorful Creations</p></th>
+
                </thead>
+
            </table>
+
            </div>
+
            <div class="div-content">
+
                <div id="div-bacteria" class="profiles center clearfix float-my-children">
+
                     <img src="https://static.igem.org/mediawiki/2016/8/8b/T--UMaryland--buildyourownbacteria.jpg" id="img-super"/img>
+
                     <div><p>This station combines science, art and play to present an analogy for synthetic biology. First, participants used legos to build their own plasmid, mixing and matching different parts. Different legos were used as an analogy for BioBricks, and contained pieces such as promoters and terminators. Visitors were able to pick what physical characteristics they wanted their bacteria to have, such as body color and number of legs, by picking the appropriate lego BioBricks. Then, participants were able to draw the bacteria they just built on our worksheet. </p></div>
+
 
                 </div>
 
                 </div>
                 <div id="div-broth" class="profiles center clearfix float-my-children">
+
                 <div id="div-broth" class="profiles">
                     <img src="https://static.igem.org/mediawiki/2016/d/d9/T--UMaryland--broth.jpg" id="img-super"/img>
+
<strong>Make Your Own LB Broth</strong>
                     <div><p>How do scientists feed their bacteria? Visitors learned about LB broth and were able to make their own “imitation LB broth” by mixing lemonade powder and water. To make their mixture, participants weighed out the proper amount of powder using a scale and measured out the correct amount of water using beakers.</p></div>
+
                     <img src="https://static.igem.org/mediawiki/2016/d/d9/T--UMaryland--broth.jpg" id="img-super" />
 +
                      
 +
                        <p>How do scientists feed their bacteria? Visitors learned about LB broth and were able to make their own “imitation LB broth” by mixing lemonade powder and water. To make their mixture, participants weighed out the proper amount of powder using a scale and measured out the correct amount of water using beakers.</p>
 +
                   
 
                 </div>
 
                 </div>
                 <div id="div-color" class="profiles center clearfix float-my-children">
+
                 <div id="div-color" class="profiles">
                     <img src="https://static.igem.org/mediawiki/2016/3/3a/T--UMaryland--pipette.jpg" id="img-super"/img>
+
<strong>Colorful Creations</strong>
                     <div><p>Science is an art! Participants were able to try pipetting food coloring into test tubes with water, and then mix different shades to make their own colorful creations.</p></div>
+
                     <img src="https://static.igem.org/mediawiki/2016/3/3a/T--UMaryland--pipette.jpg" id="img-super" />
 +
                      
 +
                        <p>Science is an art! Participants were able to try pipetting food coloring into test tubes with water, and then mix different shades to make their own colorful creations.</p>
 +
                   
 
                 </div>
 
                 </div>
            </div>
 
 
         </div>
 
         </div>
    </div>
 
<div class="image">
 
        <div data-parallax="scroll" data-image-src="https://static.igem.org/mediawiki/2016/1/10/T--UMaryland--highschool.jpeg" id="img-portdiscovery">
 
                    </div>
 
<h2 id="h25"><span>River Hill High School</span> </h2>
 
        <h3><br/><br/><br/><span>June 6th, 2016</span></h3>
 
    </div>
 
<div id="div-riverHill">
 
<div class="highSchool">
 
<p>UMaryland iGEM visited two AP Biology classes at River Hill High School located in Howard County to present and discuss a variety of synthetic biology topics. We explained what synthetic biology is, how it works, applications of genetic engineering, benefits / misconceptions of GMOs, and what iGEM is.</p>
 
<p><a href="https://static.igem.org/mediawiki/2016/3/32/T--UMaryland--RiverHillPowerpoint.pdf">Download the Powerpoint in PDF format</a></p>
 
 
</div>
 
</div>
<div id="div-slideshow">
+
<div class="scrollContainer">
<div><img src="https://static.igem.org/mediawiki/2016/9/9e/T--UMaryland--slide1.jpg" /></div>
+
<div data-parallax="scroll" data-image-src="https://static.igem.org/mediawiki/2016/1/10/T--UMaryland--highschool.jpeg" class="div-scrollPic">
<div><img data-lazy="https://static.igem.org/mediawiki/2016/2/28/T--UMaryland--slide2.png" /></div>
+
<div class="titleText" >
<div><img data-lazy="https://static.igem.org/mediawiki/2016/7/74/T--UMaryland--slide3.png"></div>
+
<h21>River Hill High School</h21></br>
<div> <img data-lazy="https://static.igem.org/mediawiki/2016/e/eb/T--UMaryland--slide4.png"></div>
+
<h31>June 6th, 2016</h31>
<div><img data-lazy="https://static.igem.org/mediawiki/2016/2/27/T--UMaryland--slide5.png"></div>
+
</div>
<div> <img data-lazy="https://static.igem.org/mediawiki/2016/1/12/T--UMaryland--slide6.png"></div>
+
<div><img data-lazy="https://static.igem.org/mediawiki/2016/c/ca/T--UMaryland--slide7.png"></div>
+
<div><img data-lazy="https://static.igem.org/mediawiki/2016/c/cb/T--UMaryland--slide8.png"></div>
+
<div> <img data-lazy="https://static.igem.org/mediawiki/2016/c/c0/T--UMaryland--slide9.png"></div>
+
<div> <img data-lazy="https://static.igem.org/mediawiki/2016/4/4d/T--UMaryland--slide10.png"></div>
+
<div> <img data-lazy="https://static.igem.org/mediawiki/2016/4/4d/T--UMaryland--slide11.png"></div>
+
<div> <img data-lazy="https://static.igem.org/mediawiki/2016/f/fb/T--UMaryland--slide12.png"></div>
+
<div> <img data-lazy="https://static.igem.org/mediawiki/2016/c/c1/T--UMaryland--slide13.png"></div>
+
<div> <img data-lazy="https://static.igem.org/mediawiki/2016/3/38/T--UMaryland--slide14.png"></div>
+
<div> <img data-lazy="https://static.igem.org/mediawiki/2016/8/85/T--UMaryland--slide15.png"></div>
+
<div> <img data-lazy="https://static.igem.org/mediawiki/2016/1/1e/T--UMaryland--slide16.png"></div>
+
<div> <img data-lazy="https://static.igem.org/mediawiki/2016/e/ef/T--UMaryland--slide17.png"></div>
+
<div> <img data-lazy="https://static.igem.org/mediawiki/2016/e/e0/T--UMaryland--slide18.png"></div>
+
<div> <img data-lazy="https://static.igem.org/mediawiki/2016/b/bf/T--UMaryland--slide19.png"></div>
+
<div> <img data-lazy="https://static.igem.org/mediawiki/2016/7/7e/T--UMaryland--slide20.png"></div>
+
<div> <img data-lazy="https://static.igem.org/mediawiki/2016/0/0d/T--UMaryland--slide21.png"></div>
+
<div> <img data-lazy="https://static.igem.org/mediawiki/2016/4/4b/T--UMaryland--slide22.png"></div>
+
<div> <img data-lazy="https://static.igem.org/mediawiki/2016/f/ff/T--UMaryland--slide23.png"></div>
+
<div> <img data-lazy="https://static.igem.org/mediawiki/2016/4/41/T--UMaryland--slide24.png"></div>
+
<div> <img data-lazy="https://static.igem.org/mediawiki/2016/c/c8/T--UMaryland--slide25.png"></div>
+
<div> <img data-lazy="https://static.igem.org/mediawiki/2016/e/e9/T--UMaryland--slide26.png"></div>
+
<div> <img data-lazy="https://static.igem.org/mediawiki/2016/0/0c/T--UMaryland--slide27.png"></div>
+
<div> <img data-lazy="https://static.igem.org/mediawiki/2016/3/3a/T--UMaryland--slide28.png"></div>
+
<div> <img data-lazy="https://static.igem.org/mediawiki/2016/d/d5/T--UMaryland--slide29.png"></div>
+
<div> <img data-lazy="https://static.igem.org/mediawiki/2016/c/c4/T--UMaryland--slide30.png"></div>
+
<div> <img data-lazy="https://static.igem.org/mediawiki/2016/d/db/T--UMaryland--slide31.png"></div>
+
<div> <img data-lazy="https://static.igem.org/mediawiki/2016/7/7e/T--UMaryland--slide32.png"></div>
+
<div> <img data-lazy="https://static.igem.org/mediawiki/2016/c/c8/T--UMaryland--slide33.png"></div>
+
<div> <img data-lazy="https://static.igem.org/mediawiki/2016/4/41/T--UMaryland--slide.png"></div>
+
<div> <img data-lazy="https://static.igem.org/mediawiki/2016/2/22/T--UMaryland--slide35.png"></div>
+
 
</div>
 
</div>
<div id="div-dots">
 
</div>
 
<!--<iframe src="https://docs.google.com/presentation/d/1nN-25htBR3C1IcBxILX60d61Amxk698q5ddcnOM04H8/embed?start=false&loop=false&delayms=3000" frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>-->
 
 
 
</div>
 
</div>
<style>
+
<div class="longText">
+
            <p>UMaryland iGEM visited two AP Biology classes at River Hill High School located in Howard County to present and discuss a variety of synthetic biology topics. We explained what synthetic biology is, how it works, applications of genetic engineering, benefits / misconceptions of GMOs, and what iGEM is.</p>
.slick-dots {
+
<p>The students thought that synthetic biology was an interesting concept, and we even answered a few questions about starting a high school iGEM team. We learned that synthetic biology is not covered in traditional high school classes, so we have to go more in-depth when explaining it. Students in AP Biology already have an understanding of basic genetics, but it was helpful to go over the material again when introducing new content.</p>
position: relative;
+
            <p><a href="https://static.igem.org/mediawiki/2016/3/32/T--UMaryland--RiverHillPowerpoint.pdf">Download the Powerpoint in PDF format</a>
}
+
            </p>
+
</div>
#div-slideshowNav {
+
<div class="longText">
margin-left: auto;
+
<div id="div-slideshow">
margin-right: auto;
+
            <div><img src="https://static.igem.org/mediawiki/2016/9/9e/T--UMaryland--slide1.jpg" />
width: 850px;
+
            </div>
}
+
            <div><img data-lazy="https://static.igem.org/mediawiki/2016/2/28/T--UMaryland--slide2.png" />
+
            </div>
#div-dots {
+
            <div><img data-lazy="https://static.igem.org/mediawiki/2016/7/74/T--UMaryland--slide3.png">
height: 100px;
+
            </div>
}
+
            <div> <img data-lazy="https://static.igem.org/mediawiki/2016/e/eb/T--UMaryland--slide4.png">
+
            </div>
#div-slideshow, #div-slideshow img, #div-dots
+
            <div><img data-lazy="https://static.igem.org/mediawiki/2016/2/27/T--UMaryland--slide5.png">
{
+
            </div>
margin-left: auto;
+
            <div> <img data-lazy="https://static.igem.org/mediawiki/2016/1/12/T--UMaryland--slide6.png">
margin-right: auto;
+
            </div>
width: 850px;
+
            <div><img data-lazy="https://static.igem.org/mediawiki/2016/c/ca/T--UMaryland--slide7.png">
}
+
            </div>
+
            <div><img data-lazy="https://static.igem.org/mediawiki/2016/c/cb/T--UMaryland--slide8.png">
#div-riverHill iframe {
+
            </div>
width: 960px;
+
            <div> <img data-lazy="https://static.igem.org/mediawiki/2016/c/c0/T--UMaryland--slide9.png">
margin-left: auto;
+
            </div>
margin-right: auto;
+
            <div> <img data-lazy="https://static.igem.org/mediawiki/2016/4/4d/T--UMaryland--slide10.png">
display: block;
+
            </div>
margin-top: 50px;
+
            <div> <img data-lazy="https://static.igem.org/mediawiki/2016/4/4d/T--UMaryland--slide11.png">
}
+
            </div>
+
            <div> <img data-lazy="https://static.igem.org/mediawiki/2016/f/fb/T--UMaryland--slide12.png">
#div-riverHill p {
+
            </div>
text-align: center;
+
            <div> <img data-lazy="https://static.igem.org/mediawiki/2016/c/c1/T--UMaryland--slide13.png">
width: 900px;
+
            </div>
margin-left: auto;
+
            <div> <img data-lazy="https://static.igem.org/mediawiki/2016/3/38/T--UMaryland--slide14.png">
margin-right: auto;
+
            </div>
line-height: 2em;
+
            <div> <img data-lazy="https://static.igem.org/mediawiki/2016/8/85/T--UMaryland--slide15.png">
}
+
            </div>
+
            <div> <img data-lazy="https://static.igem.org/mediawiki/2016/1/1e/T--UMaryland--slide16.png">
#div-riverHill {
+
            </div>
width: 1175px;
+
            <div> <img data-lazy="https://static.igem.org/mediawiki/2016/e/ef/T--UMaryland--slide17.png">
margin-left: auto;
+
            </div>
margin-right: auto;
+
            <div> <img data-lazy="https://static.igem.org/mediawiki/2016/e/e0/T--UMaryland--slide18.png">
font-size: 15pt;
+
            </div>
margin-top: 50px;
+
            <div> <img data-lazy="https://static.igem.org/mediawiki/2016/b/bf/T--UMaryland--slide19.png">
margin-bottom: 100px;
+
            </div>
}
+
            <div> <img data-lazy="https://static.igem.org/mediawiki/2016/7/7e/T--UMaryland--slide20.png">
+
            </div>
+
            <div> <img data-lazy="https://static.igem.org/mediawiki/2016/0/0d/T--UMaryland--slide21.png">
#div-fair p {
+
            </div>
text-align: center;
+
            <div> <img data-lazy="https://static.igem.org/mediawiki/2016/4/4b/T--UMaryland--slide22.png">
width: 900px;
+
            </div>
margin-left: auto;
+
            <div> <img data-lazy="https://static.igem.org/mediawiki/2016/f/ff/T--UMaryland--slide23.png">
margin-right: auto;
+
            </div>
line-height: 2em;
+
            <div> <img data-lazy="https://static.igem.org/mediawiki/2016/4/41/T--UMaryland--slide24.png">
}
+
            </div>
+
            <div> <img data-lazy="https://static.igem.org/mediawiki/2016/c/c8/T--UMaryland--slide25.png">
#div-fair {
+
            </div>
width: 1175px;
+
            <div> <img data-lazy="https://static.igem.org/mediawiki/2016/e/e9/T--UMaryland--slide26.png">
margin-left: auto;
+
            </div>
margin-right: auto;
+
            <div> <img data-lazy="https://static.igem.org/mediawiki/2016/0/0c/T--UMaryland--slide27.png">
font-size: 15pt;
+
            </div>
margin-top: 50px;
+
            <div> <img data-lazy="https://static.igem.org/mediawiki/2016/3/3a/T--UMaryland--slide28.png">
margin-bottom: 100px;
+
            </div>
}
+
            <div> <img data-lazy="https://static.igem.org/mediawiki/2016/d/d5/T--UMaryland--slide29.png">
+
            </div>
#div-fairPic {
+
            <div> <img data-lazy="https://static.igem.org/mediawiki/2016/c/c4/T--UMaryland--slide30.png">
height: 600px;
+
            </div>
}
+
            <div> <img data-lazy="https://static.igem.org/mediawiki/2016/d/db/T--UMaryland--slide31.png">
</style>
+
            </div>
<div class="image">
+
            <div> <img data-lazy="https://static.igem.org/mediawiki/2016/7/7e/T--UMaryland--slide32.png">
        <div id="div-fairPic"data-parallax="scroll" data-image-src="https://static.igem.org/mediawiki/2016/2/25/T--UMaryland--fair.jpg" >
+
            </div>
 +
            <div> <img data-lazy="https://static.igem.org/mediawiki/2016/c/c8/T--UMaryland--slide33.png">
 +
            </div>
 +
            <div> <img data-lazy="https://static.igem.org/mediawiki/2016/4/41/T--UMaryland--slide.png">
 +
            </div>
 +
            <div> <img data-lazy="https://static.igem.org/mediawiki/2016/2/22/T--UMaryland--slide35.png">
 +
            </div>
 
         </div>
 
         </div>
<h2 id="h25"><span>STEM Fair</span> </h2>
 
        <h3><br/><br/><br/><span>September 24th, 2016</span></h3>
 
    </div>
 
<div id="div-fair">
 
<div class="highSchool">
 
<p>UMaryland iGEM was invited to the STEM Fair hosted by the UMD Engineers Without Borders at the Kim Engineering building on campus. We talked about synthetic biology and iGEM to members of campus and held the micropipette activity. At the fair was also other engineering and computer science clubs which opened up dialogue for further collaboration.</p>
 
 
</div>
 
</div>
 +
<div class="longText">
 +
<p>In the future, we would want to have more interactive parts in our presentation when we would ask the students questions and have discussions during the powerpoint, rather than saving all their questions until the end. A good idea we would like to try to encourage more productive discussion is to split students up into small groups and have them discuss their views of GMOs and the applications that they know, and then share with the class. This would ensure more student participation and help us understand what they already know and any misconceptions they might have.</p>
 +
</div>
 +
<div class="scrollContainer">
 +
<div data-parallax="scroll" data-image-src="https://static.igem.org/mediawiki/2016/2/25/T--UMaryland--fair.jpg" class="div-scrollPic">
 +
<div class="titleText" >
 +
<h21>STEM Fair</h21></br>
 +
<h31>September 24th, 2016</h31>
 +
</div>
 +
</div>
 +
</div>
 +
<div class="longText">
 +
<p>UMaryland iGEM was invited to the STEM Fair hosted by the UMD Engineers Without Borders at the Kim Engineering building on campus. We talked about synthetic biology and iGEM to members of campus and held the micropipette activity. At the fair was also other engineering and computer science clubs which opened up dialogue for further collaboration.</p>
 +
</div>
 
</div>
 
</div>
 
     <div id="bot-nav">
 
     <div id="bot-nav">
Line 891: Line 785:
 
</div>
 
</div>
 
     </div>
 
     </div>
 
+
</body>
        <!-- For nav bar scrolling + hovering + window resize effects-->
+
 
<script>
 
<script>
 
 
 +
        $('#div-slideshow').slick({
 +
            lazyLoad: 'ondemand',
 +
            slidesToShow: 1,
 +
            slidesToScroll: 1,
 +
            infinite: true,
 +
dots: true
  
 +
        });
 
 
  $('#div-slideshow').slick({
+
$('#div-activities').slick({
lazyLoad: 'ondemand',
+
            slidesToShow: 1,
slidesToShow: 1,
+
            slidesToScroll: 1,
slidesToScroll: 1,
+
            dots: true
  dots: true,
+
appendDots: $("#div-dots"),
+
infinite: false
+
 
+
  });
+
+
if ( self !== top ) {
+
$('#top_menu_under, #top_menu_14, #top_menu_inside, nav').remove();
+
$('#overruled nav').remove();
+
}
+
// Animation over top nav bar when mouse hovers
+
$('nav').mouseover(
+
function () {
+
$('#img-logo').css('transition', '.35s ease-in');
+
$('#img-logo').css('opacity', '1');
+
$('#img-igemlogo').css('transition', '.35s ease-in');
+
$('#img-igemlogo').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');
+
$('#img-igemlogo').css('transition', '.25s ease');
+
$('#img-igemlogo').css('opacity', '0');
+
$('nav ul').removeClass("hover");
+
$('nav').css('transition', '.5s ease');
+
}}}
+
  
 +
        });
 +
 +
$(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');
 
}
 
}
),
+
// Window width effect on top nav bar
+
var marginTitle = $(window).outerWidth(true) - $('.titleText').outerWidth(false);
$(document).ready(function() {
+
var marginCheck = marginTitle / 2;
function checkWidth() {
+
if (marginCheck < 15) {
if ($(window).width() < 980 || $('nav').hasClass('pushed')){
+
$('.titleText').css('left','15px');
$('nav li').css('display', 'none');
+
$('.titleText').css('margin-left','0px');
$('#img-more').css('display','block');
+
} else {
$('nav ul').addClass("hover");
+
$('.titleText').css('left','50%');
$('#img-logo').css('transition', '.35s ease-in');
+
$('.titleText').css('margin-left','-40%');
$('#img-logo').css('opacity', '1');
+
$('#img-igemlogo').css('transition', '.35s ease-in');
+
$('#img-igemlogo').css('opacity', '1')
+
} else {
+
$('nav li').css('display', 'inline');
+
$('#img-more').css('display','none');
+
$('nav ul').removeClass("hover");
+
if ($(window).scrollTop() > 0) {
+
$('#img-igemlogo').css('transition', '.25s ease');
+
$('#img-igemlogo').css('opacity', '0');
+
$('#img-logo').css('transition', '.25s ease');
+
$('#img-logo').css('opacity', '0');
+
$('nav ul').addClass("scrolled");
+
}
+
}
+
 
}
 
}
// Execute on load
+
})
    checkWidth();
+
    // Bind event listener
+
$(window).load(function() {
    $(window).resize(checkWidth);
+
            $('body').css('opacity', '1');
});
+
var marginTotal = $(window).outerWidth(true) - $('.titleText').outerWidth(false);
// Resized nav bar effect when more icon is clicked
+
var marginLeft = marginTotal / 2;
$('#img-more').click(function() {
+
if (marginLeft > 14) {
$('#img-more').toggleClass('pushed');
+
$('.longText').css('margin-left', marginLeft);
$('#div-navResized').toggleClass('pushed');
+
}else {
$('nav').toggleClass('pushed');
+
$('.longText').css('margin-left', '15px');
$('nav img').toggleClass('pushed');
+
}
if ($(window).width() >= 980) { var pushed = $('body').hasClass('pushed'); if (pushed == false){
+
$('nav li').css('display', 'inline');
+
var marginTitle = $(window).outerWidth(true) - $('.titleText').outerWidth(false);
$('#img-more').css('display','none');
+
var marginCheck = marginTitle / 2;
$('nav ul').removeClass("hover");
+
if (marginCheck < 15) {
$('#img-igemlogo').css('transition', '.25s ease');
+
$('.titleText').css('left','15px');
$('#img-igemlogo').css('opacity', '0');
+
$('.titleText').css('margin-left','0px');
$('#img-logo').css('transition', '.25s ease');
+
} else {
$('#img-logo').css('opacity', '0');
+
$('.titleText').css('left','50%');
}}
+
$('.titleText').css('margin-left','-40%');
});
+
}
// 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');
+
$('#img-igemlogo').css('transition', '.25s ease');
+
$('#img-igemlogo').css('opacity', '0');
+
}} else {
+
nav.removeClass("scrolled");
+
$('#img-logo').css('transition', '.35s ease-in');
+
$('#img-logo').css('opacity', '1');
+
$('#img-igemlogo').css('transition', '.35s ease-in');
+
$('#img-igemlogo').css('opacity', '1');
+
}
+
});
+
                 
+
                $(body).css('display','block');
+
 
</script>
 
</script>
    <script>
+
<script>
    var current = 'super';  
+
        /* Hiding stupid stuff*/
    var currentTop = 'building';  
+
        $(document).ready(function () {
    var lastBuildAct = 'super';
+
            $('#top_title').css('display', 'none');
    var lastAct = 'bacteria';
+
            $('#top_menu').css('display', 'none');
    $('.navigator').click( function() { // when any element with .class is clicked, trigger function
+
            $('#HQ_page').css('display', 'none');
         $('.navigator').css('border-bottom','1px solid #A8A8A8'); // make all navigational element shave no bottom border
+
            $('#top_menu_under').css('display', 'none');
        $(this).css('border-bottom', '4px solid #A8A8A8'); // the clicked navigational element given border
+
        });
        var selected = $(this).attr('data-select'); // grabs the name of the navigational element clicked
+
        $('#HQ_page').attr("id", "iGEM"); //voids all dumb CSS iGEM HQ wrote which overrides our code
        if (selected != currentTop) { // only change display / trigger animation if clicking different nav
+
        $('#mw-content-text').attr("id", "overruled").removeClass('mw-content-ltr');
            $('#div-' + currentTop).css('display','none'); // hides all text
+
 
            $('#div-' + selected).css('margin-left', '60px') // slighly shifts right all text to set up for animation
+
        // Animation over top nav bar when mouse hovers
             $('#div-' + selected).css('display','block'); // the div containing the text that is selected is displayed
+
         $('nav').mouseover(
            $('#div-' + selected).animate({ marginLeft: '0px'}, 200); // the text is animated to quickly move left
+
                function () {
            if (selected == 'building') {
+
                    $('#img-logo').css('transition', '.35s ease-in')
                $('#div-' + lastBuildAct).css('display','block');
+
                        .css('opacity', '1');
                $('#th-' + lastBuildAct).css('border-bottom', '4px solid #A8A8A8');
+
                    $('#img-igemlogo').css('transition', '.35s ease-in')
             } else {
+
                        .css('opacity', '1');
                $('#div-' + lastAct).css('display','block');
+
                    $('nav ul').addClass("hover");
                $('#th-' + lastAct).css('border-bottom', '4px solid #A8A8A8');
+
                }
 +
            ),
 +
            $('nav').mouseout(
 +
                function () {
 +
                    var scroll = $(window).scrollTop();
 +
                    if (scroll > 0) {
 +
                        if ($(window).width() >= 1090) {
 +
                            var pushed = $('body').hasClass('pushed');
 +
                            if (pushed == false) {
 +
                                $('#img-logo').css('transition', '.25s ease')
 +
                                    .css('opacity', '0');
 +
                                $('#img-igemlogo').css('transition', '.25s ease')
 +
                                    .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() < 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');
 +
                            $('#img-igemlogo').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-igemlogo').css('transition', '.25s ease')
 +
                                    .css('opacity', '0');
 +
                                $('#img-logo').css('transition', '.25s ease')
 +
                                    .css('opacity', '0');
 +
                                $('nav ul').addClass("scrolled");
 +
                            }
 +
                        }
 +
                    }
 +
                    // Execute on load
 +
                checkWidth();
 +
                // Bind event listener
 +
                $(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');
 +
            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");
 +
                }
 
             }
 
             }
            currentTop = selected; // sets the current display
+
        });
         }
+
        // Scrolling animation for top nav bar
    })
+
         var nav = $('nav ul');
    $('.belowNav').click( function() { // when any element with .class is clicked, trigger function
+
        $(window).scroll(function () {
        $('.belowNav').css('border-bottom','1px solid #A8A8A8'); // make all navigational element shave no bottom border
+
            var scroll = $(window).scrollTop();
        $(this).css('border-bottom', '4px solid #A8A8A8'); // the clicked navigational element given border
+
            if (scroll > 0) {
        var selected = $(this).attr('data-select'); // grabs the name of the navigational element clicked
+
                if ($(window).width() >= 1090) {
        if (selected != current) { // only change display / trigger animation if clicking different nav
+
                    nav.addClass("scrolled");
            $('#div-' + current).css('display','none'); // hides all text
+
                    nav.removeClass("hover");
            if (currentTop == 'building') {
+
                    $('#img-logo').css('transition', '.25s ease')
                $('#div-' + lastBuildAct).css('display','none');
+
                        .css('opacity', '0');
            } else {
+
                    $('#img-igemlogo').css('transition', '.25s ease')
                $('#div-' + lastAct).css('display','none');
+
                        .css('opacity', '0');
 +
                }
 
             }
 
             }
             $('.div-content').css('margin-left', '60px') // slighly shifts right all text to set up for animation
+
             else {
            $('#div-' + selected).css('display','block'); // the div containing the text that is selected is displayed
+
                nav.removeClass("scrolled");
            $('.div-content').animate({ marginLeft: '0px'}, 200); // the text is animated to quickly move left
+
                $('#img-logo').css('transition', '.35s ease-in')
            current = selected; // sets the current display
+
                    .css('opacity', '1');
            if (currentTop == 'building') {
+
                $('#img-igemlogo').css('transition', '.35s ease-in')
                lastBuildAct = current;
+
                    .css('opacity', '1');
             } else {
+
             }
                lastAct = current;
+
        });
            }
+
 
         }
+
         $('body').css('display', 'block');
    })
+
 
     </script>
 
     </script>
    <script src="http://pixelcog.github.io/parallax.js/js/parallax.min.js">
+
      <script>
    </script>
+
/* Hiding stupid stuff*/
</body>
+
        $('#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> $('#iGEM').css('display','block');
 +
</script>
 
</html>
 
</html>

Latest revision as of 03:09, 18 October 2016

</div> </div> Human Practices

Engagement
Furthering the dialogue with the public about synthetic biology

To learn about other potential applications of our project, we interviewed cattle farmers about their awareness of cow’s methane contribution and their environmental practices. With our information, we prepared and distributed a brochure that informed animal farmers how to reduce greenhouse gas emissions. We also reached out to the public at farmer’s markets and gauged their support on topics like GMO’s and global warming. We discussed our project and the relevant environmental issues. Finally, to garner interest for iGEM and synthetic biology, we engaged future scientists at different points in their careers by performing activities with kids at a Building with Biology event in Baltimore, introducing synthetic biology to local high schoolers, and leading activities for college students at a STEM expo at the University of Maryland.

Building with Biology: Port Discovery
July 30th, 2016

We volunteered at the Building with Biology Event held at Port Discovery in Baltimore, MD to raise awareness about synthetic biology among children 8 and up. We manned six tables with different activities involving synthetic biology, which are described in more depth below.

Super Organism!

At this station, visitors were introduced to two catastrophic situations that they needed to solve using their imaginations: 1) Their friend fell off of a skyscraper, and 2) Their friend caused a massive oil spill in the ocean. To tackle the first problem, kids designed a superhero that could shoot spiderwebs or fly to ultimately catch their friend. For the second problem, kids designed a super bacteria that could clean the ocean by detecting, degrading, or digesting oil. This activity served as a introduction of the possibilites of synthetic biology and genetic engineering.

Kit of Parts

Visitors would learn about the concept of BioBricks and versatility of engineering cells to solve global issues. They used a cell model made of wooden poles and color-coded parts that fit on the poles. Each color had a different function like red for production and blue for sensing. A visitor would pick a challenge card with an area of research on it ranging from making synthetic blood to treating malaria. Then she would make a cell that would solve the problem using a solution description on the back of the card.

Bio Bistro

Eat it? Think about it? No way? Visitors were introduced to a variety of engineered foods, both currently available and in development, and asked their opinion on consuming the goods. Items included vanilla flavoring, caffeine, and milk synthesized by yeast, a food pill that provided all daily nutrients, golden rice, and meat created in a lab. Participants were also introduced to different ways we have modified agriculture like selective breeding, genetic engineering, and synthetic biology.

Tech Tokens

Visitors would be introduced to a wide range of applications for synthetic biology to start a conversation among the visitors on the level of importance of each application. Each visitor at the table was given a stack of colored coins to represent their opinion. They would place all their coins on the application(s) most important to them and then we would all discuss their choices and reasoning. An additional activity was to give each person at the table a character card with occupations ranging from president of the U.S. to Canadian college student. They would repeat the process of placing coins, but this time in the mindset of the occupation they were given.

Build Your Own Bacteria

This station combines science, art and play to present an analogy for synthetic biology. First, participants used legos to build their own plasmid, mixing and matching different parts. Different legos were used as an analogy for BioBricks, and contained pieces such as promoters and terminators. Visitors were able to pick what physical characteristics they wanted their bacteria to have, such as body color and number of legs, by picking the appropriate lego BioBricks. Then, participants were able to draw the bacteria they just built on our worksheet.

Make Your Own LB Broth

How do scientists feed their bacteria? Visitors learned about LB broth and were able to make their own “imitation LB broth” by mixing lemonade powder and water. To make their mixture, participants weighed out the proper amount of powder using a scale and measured out the correct amount of water using beakers.

Colorful Creations

Science is an art! Participants were able to try pipetting food coloring into test tubes with water, and then mix different shades to make their own colorful creations.

River Hill High School
June 6th, 2016

UMaryland iGEM visited two AP Biology classes at River Hill High School located in Howard County to present and discuss a variety of synthetic biology topics. We explained what synthetic biology is, how it works, applications of genetic engineering, benefits / misconceptions of GMOs, and what iGEM is.

The students thought that synthetic biology was an interesting concept, and we even answered a few questions about starting a high school iGEM team. We learned that synthetic biology is not covered in traditional high school classes, so we have to go more in-depth when explaining it. Students in AP Biology already have an understanding of basic genetics, but it was helpful to go over the material again when introducing new content.

Download the Powerpoint in PDF format

In the future, we would want to have more interactive parts in our presentation when we would ask the students questions and have discussions during the powerpoint, rather than saving all their questions until the end. A good idea we would like to try to encourage more productive discussion is to split students up into small groups and have them discuss their views of GMOs and the applications that they know, and then share with the class. This would ensure more student participation and help us understand what they already know and any misconceptions they might have.

STEM Fair
September 24th, 2016

UMaryland iGEM was invited to the STEM Fair hosted by the UMD Engineers Without Borders at the Kim Engineering building on campus. We talked about synthetic biology and iGEM to members of campus and held the micropipette activity. At the fair was also other engineering and computer science clubs which opened up dialogue for further collaboration.