Difference between revisions of "Team:Harvard BioDesign/Team"

 
(25 intermediate revisions by 3 users not shown)
Line 1: Line 1:
@import url("http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,600");
 
@import url("https://2016.igem.org/Template:Harvard_BioDesign/assets_css_font-awesome");
 
  
 
+
<!--
 
+
/*
+
 
Helios by HTML5 UP
 
Helios by HTML5 UP
 
html5up.net | @ajlkn
 
html5up.net | @ajlkn
 
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
 
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/
+
-->
  
/* rebekah - code to override and fix igem default style */
+
<html>
/* rebekah - fix margin and sidebar issues */
+
#sideMenu, #top_title {display:none;}
+
<head>
#content { padding:0px; width:100%; margin-top:-42px; margin-left:0px;} 
+
<title>Harvard BioDesign 2016</title>
#top_menu_14 {height: 20px;}
+
<meta charset="utf-8" />
 +
<meta name="viewport" content="width=device-width, initial-scale=1" />
  
 +
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
 +
 +
<link rel="stylesheet" type="text/css" href="https://2016.igem.org/Template:Harvard_BioDesign/assets_css_main?action=raw&ctype=text/css" />
 +
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
  
/* Reset */
+
 +
<!-- Scripts -->
 +
<script type="text/javascript" src="https://2016.igem.org/Template:Harvard_BioDesign/assets_js_jquery_min?
 +
action=raw&ctype=text/javascript"></script>
 +
<script type="text/javascript" src="https://2016.igem.org/Template:Harvard_BioDesign/assets_js_jquery_dropotron_min?
 +
action=raw&ctype=text/javascript"></script>
 +
<script type="text/javascript" src="https://2016.igem.org/Template:Harvard_BioDesign/assets_js_jquery_scrolly_min?
 +
action=raw&ctype=text/javascript"></script>
 +
<script type="text/javascript" src="https://2016.igem.org/Template:Harvard_BioDesign/assets_js_jquery_onvisible_min?
 +
action=raw&ctype=text/javascript"></script>
 +
<script type="text/javascript" src="https://2016.igem.org/Template:Harvard_BioDesign/assets_js_skel_min?
 +
action=raw&ctype=text/javascript"></script>
 +
<script type="text/javascript" src="https://2016.igem.org/Template:Harvard_BioDesign/assets_js_util?
 +
action=raw&ctype=text/javascript"></script>
 +
<script type="text/javascript" src="https://2016.igem.org/Template:Harvard_BioDesign/assets_js_main?
 +
action=raw&ctype=text/javascript"></script>
 +
</head>
 +
<body class="homepage">
 +
<div id="page-wrapper">
  
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
+
<!-- Header -->
margin: 0;
+
<div id="header">
padding: 0;
+
border: 0;
+
font-size: 100%;
+
font: inherit;
+
vertical-align: baseline;
+
}
+
  
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
+
<!-- Inner -->
display: block;
+
<!--
}
+
<div class="inner">
 +
<header>
 +
<h1><a href="https://2016.igem.org/Team:Harvard_BioDesign" id="logo">Harvard BioDesign</a></h1>
 +
<hr />
 +
<p>Description</p>
 +
</header>
 +
<footer>
 +
<a href="#banner" class="button circled scrolly">Start</a>
 +
</footer>
 +
</div>
 +
-->
  
body {
+
<!-- Nav -->
line-height: 1;
+
<nav id="nav" >
}
+
<ul>
 +
<li><a href="https://2016.igem.org/Team:Harvard_BioDesign">Home</a></li>
 +
<li>
 +
<a href="#">Team</a>
 +
<ul>
 +
<li><a href="https://2016.igem.org/Team:Harvard_BioDesign/Team">Team</a></li>
 +
<li><a href="https://2016.igem.org/Team:Harvard_BioDesign/Collaborations">Collaborations</a></li>
 +
</ul>
 +
</li>
 +
<li>
 +
<a href="#">Project</a>
 +
<ul>
 +
<li><a href="https://2016.igem.org/Team:Harvard_BioDesign/Description">Description</a></li>
 +
<li><a href="https://2016.igem.org/Team:Harvard_BioDesign/Design">Design</a></li>
 +
<li><a href="https://2016.igem.org/Team:Harvard_BioDesign/Experiments">Experiments</a></li>
 +
<li><a href="https://2016.igem.org/Team:Harvard_BioDesign/Proof">Proof of Concept</a></li>
 +
<li><a href="https://2016.igem.org/Team:Harvard_BioDesign/Demonstrate">Demonstrate</a></li>
 +
<li><a href="https://2016.igem.org/Team:Harvard_BioDesign/Results">Results</a></li>
 +
<li><a href="https://2016.igem.org/Team:Harvard_BioDesign/Notebook">Notebook</a></li>
 +
</ul>
 +
</li>
 +
<li>
 +
<a href="#">Parts</a>
 +
<ul>
 +
<li><a href="https://2016.igem.org/Team:Harvard_BioDesign/Parts">Parts</a></li>
 +
<li><a href="https://2016.igem.org/Team:Harvard_BioDesign/Basic_Part">Basic Parts</a></li>
 +
<li><a href="https://2016.igem.org/Team:Harvard_BioDesign/Composite_Part">Composite Parts</a></li>
 +
<li><a href="https://2016.igem.org/Team:Harvard_BioDesign/Part_Collection">Part Collection</a></li>
 +
</ul>
 +
</li>
  
ol, ul {
+
<!-- R edits -->
list-style: none;
+
}
+
  
blockquote, q {
+
<li><a href="https://2016.igem.org/Team:Harvard_BioDesign/Safety">Safety</a></li>
quotes: none;
+
<li><a href="https://2016.igem.org/Team:Harvard_BioDesign/Attributions">Attributions</a></li>
}
+
<li>
 +
<a href="#">Human Practices</a>
 +
<ul>
 +
<li><a href="https://2016.igem.org/Team:Harvard_BioDesign/Human_Practices">Human Practices</a></li>
 +
<li><a href="https://2016.igem.org/Team:Harvard_BioDesign/HP/Silver">Silver</a></li>
 +
<li><a href="https://2016.igem.org/Team:Harvard_BioDesign/HP/Gold">Gold</a></li>
 +
<li><a href="https://2016.igem.org/Team:Harvard_BioDesign/Integrated_Practices">Integrated Practices</a></li>
 +
<li><a href="https://2016.igem.org/Team:Harvard_BioDesign/Engagement">Engagement</a></li>
 +
</ul>
 +
</li>
 +
<li>
 +
<a href="#">Awards</a>
 +
<ul>
 +
<li><a href="https://2016.igem.org/Team:Harvard_BioDesign/Model">Model</a></li>
 +
<li><a href="https://2016.igem.org/Team:Harvard_BioDesign/Achievements">Achievements</a></li>
 +
</ul>
 +
</li>
  
blockquote:before, blockquote:after, q:before, q:after {
+
</ul>
content: '';
+
</nav>
content: none;
+
}
+
  
table {
+
</div>
border-collapse: collapse;
+
border-spacing: 0;
+
}
+
  
body {
 
-webkit-text-size-adjust: none;
 
}
 
  
/* Box Model */
+
<!-- Main -->
 +
<div class="wrapper style1">
  
*, *:before, *:after {
+
<div class="container">
-moz-box-sizing: border-box;
+
<article id="main" class="special">
-webkit-box-sizing: border-box;
+
<header>
box-sizing: border-box;
+
<h2>Meet the Team!</h2>
}
+
<p>
 +
 +
</p>
 +
</header>
 +
<center><a href="#" class="image featured"><img src="https://static.igem.org/mediawiki/2016/2/27/T--Harvard_BioDesign--images_team01.jpg"  style="width: 66%; height: 66%"alt=""/></a></center>
 +
<p>
 +
</p>
  
/* Containers */
 
  
.container {
 
margin-left: auto;
 
margin-right: auto;
 
}
 
  
.container.\31 25\25 {
 
width: 100%;
 
max-width: 1750px;
 
min-width: 1400px;
 
}
 
  
.container.\37 5\25 {
 
width: 1050px;
 
}
 
  
.container.\35 0\25 {
+
<!-- Carousel for Team Members -->
width: 700px;
+
<header><h2>Team Members</h2></header>
}
+
<section class="carousel">
 +
<div class="reel">
  
.container.\32 5\25 {
+
<article>
width: 350px;
+
<a href="#" class="image featured"><img src="https://static.igem.org/mediawiki/2016/0/09/T--Harvard_BioDesign--images_gabi01.jpg" alt="" /></a>
}
+
<header>
 +
<h3>Gabi Berner</h3>
 +
</header>
 +
<p>Hailing from the sandy beaches of South Florida, particularly Coral Springs where there are no coral or springs, Gabi is a rising sophomore in Eliot House studying applied mathematics on a pre-med track. When she is not running gels and bothering “Mama Bom” with all her questions, she can be found going on runs, café crawling through Cambridge, and exploring all that Boston has to offer. Aside from learning synthetic biology and lab techniques, she hopes to conquer her fear of the autoclave before the end of the summer.</p>
 +
</article>
  
.container {
+
<article>
width: 1400px;
+
<a href="#" class="image featured"><img src="https://static.igem.org/mediawiki/2016/thumb/9/9b/T--Harvard_BioDesign--images_will01.jpg/1200px-T--Harvard_BioDesign--images_will01.jpg" alt="" /></a>
}
+
<header>
 +
<h3>Will Cho</h3>
 +
</header>
 +
<p>Will, a penguin from Quincy House, is the team cook. He studies biomedical engineering and philosophy, but also enjoys being a pianist/clarinetist and a master swordsman. Will has lived in New Zealand, Korea, Canada, and France, and wants to move to more countries. His girlfriend is ERS. Can bake ice cream cakes on demand.</p>
 +
</article>
  
@media screen and (max-width: 1680px) {
+
<article>
 +
<a href="#" class="image featured"><img src="https://static.igem.org/mediawiki/2016/9/9a/T--Harvard_BioDesign--images_rebekah01.jpg" alt="" /></a>
 +
<header>
 +
<h3>Rebekah Chun</h3>
 +
</header>
 +
<p>Rebekah Americaborn of the House Chun, Queen of SDS-PAGE, Protector of the Wiki, Mother of PETase, Breaker of PET films and countless filter bottles, Khaleesi of Napping, is a sophomore in Lowell House. She thinks about biomedical engineering and philosophy when she concentrates. She enjoys eating mango, drinking coffee and tea, raiding supply rooms, running for stopped M2 buses, and pipetting for the sake of iGEM (+ filtering).</p>
 +
</article>
  
.container.\31 25\25 {
+
<article>
width: 100%;
+
<a href="#" class="image featured"><img src="https://static.igem.org/mediawiki/2016/9/9a/T--Harvard_BioDesign--images_fey01.jpg" alt="" /></a>
max-width: 1500px;
+
<header>
min-width: 1200px;
+
<h3>Mofeyifoluwa Edun</h3>
}
+
</header>
 +
<p>Goes by Fey. Wears white headphones and a stylish hat. Nigerian princess and world traveller. Looking for German passport holder eligible for marriage.</p>
 +
</article>
  
.container.\37 5\25 {
+
<article>
width: 900px;
+
<a href="#" class="image featured"><img src="https://static.igem.org/mediawiki/2016/6/64/T--Harvard_BioDesign--images_yasmeen01.jpg" alt="" /></a>
}
+
<header>
 +
<h3>Yasmeen Fakhro</h3>
 +
</header>
 +
<p>Only nice person on team. Hobbies include filming videos and unsuccessfully trying to do a cartwheel. Occasionally savage.</p>
 +
</article>
  
.container.\35 0\25 {
+
<article>
width: 600px;
+
<a href="#" class="image featured"><img src="https://static.igem.org/mediawiki/2016/3/33/T--Harvard_BioDesign--images_rena01.jpg" alt="" /></a>
}
+
<header>
 +
<h3>Lorena Lyon</h3>
 +
</header>
 +
<p>Is half-cat, half-human, professional <em>Badass</em> and Boda Borg Master. Scared of scary stuff, but loves danger. Is a “vegetarian”.</p>
 +
</article>
  
.container.\32 5\25 {
+
<article>
width: 300px;
+
<a href="#" class="image featured"><img src="https://static.igem.org/mediawiki/2016/4/47/T--Harvard_BioDesign--images_kevins01.jpg" alt="" /></a>
}
+
<header>
 +
<h3></h3>
 +
</header>
 +
<p> Originally from Albania, “Kevinella” is a rising junior in Fish House, concentrating in Bioengineering with a secondary field in Energy and Environment.  Beyond his technical studies, his other interests lie in Albanian soccer, environmental policy issues, particularly surrounding the use of biomaterials for renewable energy. Fluent in Albanian, English, and Italian, as well as a current learner of German and French, Kevin hopes to use his linguistic abilities to explore new cultures during his travels across Europe. In his free time, Kevin enjoys swimming, playing table tennis on Wii, bleaching his clothes in lab, and just started watching “Game of Thrones.” </p>
 +
</article>
  
.container {
+
<article>
width: 1200px;
+
<a href="#" class="image featured"><img src="https://static.igem.org/mediawiki/2016/1/15/T--Harvard_BioDesign--images_daniel01.jpg" alt="" /></a>
}
+
<header>
 +
<h3>Daniel Um</h3>
 +
</header>
 +
<p>
 +
Daniel Um, from Manila, Philippines, is a rising sophomore in Pforzheimer House, studying Integrative Biology. His hobbies include Guitar, Tennis and Restaurant Hunting.  His zodiac sign is Libra and in his past life he was a Narwhal. He is looking forward to meeting new friends. Uke player. Loves Kevinella back. “Warmest Regards” - Daniel</p>
 +
</article>
  
}
+
<article></article>
  
@media screen and (max-width: 1280px) {
 
  
.container.\31 25\25 {
+
</div>
width: 100%;
+
</section>
max-width: 125%;
+
min-width: 100%;
+
}
+
  
.container.\37 5\25 {
+
<!-- Carousel for Mentors -->
width: 75%;
+
<header><h2>Mentors</h2></header>
}
+
<section class="carousel">
 +
<div class="reel">
  
.container.\35 0\25 {
+
<article>
width: 50%;
+
<a href="#" class="image featured"><img src="https://static.igem.org/mediawiki/2016/c/c5/T--Harvard_BioDesign--images_joshi01.jpg" alt="" /></a>
}
+
<header>
 +
<h3>Neel Joshi</h3>
 +
</header>
 +
<p>Neel is an Associate Professor of Chemical and Biological Engineering at John A. Paulson Harvard School of Engineering and Applied Sciences. He is developing new biomaterials constructed from engineered proteins and peptides. The overarching goal of his research is to extract innovative design principles from materials and systems that are the product of natural evolution and recapitulate them in synthetic systems where their physical properties can be precisely tuned to suit biomedical and biotechnological needs. Current projects employ a range of approaches, including synthetic chemistry, protein engineering, directed evolution, and molecular biology.</p>
 +
</article>
  
.container.\32 5\25 {
+
<article>
width: 25%;
+
<a href="#" class="image featured"><img src="https://static.igem.org/mediawiki/2016/thumb/6/6c/T--Harvard_BioDesign--images_bom10.jpg/1200px-T--Harvard_BioDesign--images_bom10.jpg" alt="" /></a>
}
+
<header>
 +
<h3>Pichet (Bom) Praveschotinunt</h3>
 +
</header>
 +
<p>"Mama Bom" is a graduate student in Joshi lab at Harvard University. He is originally from Bangkok. He enjoys doing research on microbial engineering, protein engineering and experimenting with mice. In his free time, he loves to cook Thai food, watch blockbuster movies and travel the world. His most recent accomplishments include catching a Pikachu on the dock of an island all the while gleefully infecting everyone with his spicy bubbliness. He is #lifegoals. “I like spicy lol. Oh my god ~ >_<” – Bom</p>
 +
</article>
  
.container {
+
<article>
width: 100%;
+
<a href="#" class="image featured"><img src="https://static.igem.org/mediawiki/2016/4/4e/T--Harvard_BioDesign--images_david01.jpg" alt="" /></a>
}
+
<header>
 +
<h3>David Lips</h3>
 +
</header>
 +
<p>"Papi David" is a rock climbing enthusiast and a poppin' DJ who bikes around Boston with his luscious Dutch curls flowing with synthetic biology trivia. In his spare time, he works on quorum sensing at the Silver lab. Wears fox shirts.</p>
 +
</article>
  
}
+
<article>
 +
<a href="#" class="image featured"><img src="https://static.igem.org/mediawiki/2016/6/6d/T--Harvard_BioDesign--images_kevinh01.jpg" alt="" /></a>
 +
<header>
 +
<h3>Kevin Hof</h3>
 +
</header>
 +
<p>While taking a break on developing the next big thing since sliced bread, Kevin is focused on protein engineering and drug development.</p>
 +
</article>
  
@media screen and (max-width: 960px) {
+
<article>
 +
<a href="#" class="image featured"><img src="https://static.igem.org/mediawiki/2016/2/21/T--Harvard_BioDesign--images_anita01.jpg" alt="" /></a>
 +
<header>
 +
<h3>Anita Chandrahas</h3>
 +
</header>
 +
<p>Anita received B.S. in Biomedical Engineering, with a minor in Performing Arts, University of Texas at Dallas, 2015</p>
 +
</article>
 +
<article></article>
  
.container.\31 25\25 {
+
</div>
width: 100%;
+
</section>
max-width: 125%;
+
min-width: 100%;
+
}
+
  
.container.\37 5\25 {
 
width: 75%;
 
}
 
  
.container.\35 0\25 {
 
width: 50%;
 
}
 
  
.container.\32 5\25 {
 
width: 25%;
 
}
 
  
.container {
 
width: 100%;
 
}
 
  
}
+
</div>
  
@media screen and (max-width: 840px) {
+
</div>
 +
<!--y Does it start here?-->
 +
<!-- Footer -->
 +
<div id="footer">
 +
<div class="container">
 +
<div class="row">
 +
<div class="12u">
  
.container.\31 25\25 {
+
<!-- Contact -->
width: 100%;
+
<section class="contact">
max-width: 125%;
+
min-width: 100%;
+
<ul class="icons">
}
+
  
.container.\37 5\25 {
+
<li>
width: 75%;
+
<a href="https://www.facebook.com/Harvard-iGEM-269794024286" target="_blank">
}
+
<img src="https://static.igem.org/mediawiki/2016/2/2f/T--Harvard_BioDesign--images_facebook01.png"alt="Facebook Logo" style="width:51px;height:51px;">
 +
</a>
 +
</li>
  
.container.\35 0\25 {
+
              <li>
width: 50%;
+
              <a href="mailto:crimsonigem@gmail.com">
}
+
              <img src="https://static.igem.org/mediawiki/2016/e/e2/T--Harvard_BioDesign--images_gmail01.png" alt="Email Logo" style="width:51px;height:51px;">
 +
              </a>
 +
              </li>
  
.container.\32 5\25 {
 
width: 25%;
 
}
 
  
.container {
+
              <li>
width: 100% !important;
+
              <a href="https://twitter.com/harvardigem" target="_blank">
}
+
              <img src="https://static.igem.org/mediawiki/2016/4/4e/T--Harvard_BioDesign--images_twitter01.png"alt="Twitter Logo" style="width:51px;height:51px;">
 +
              </a>
 +
              </li>
  
}
 
  
@media screen and (max-width: 736px) {
+
</ul>
 +
</section>
  
.container.\31 25\25 {
+
<!-- Copyright -->
width: 100%;
+
<div class="copyright">
max-width: 125%;
+
<ul class="menu">
min-width: 100%;
+
<li>&copy; 2016 Harvard iGEM</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
}
+
</ul>
 +
  
.container.\37 5\25 {
+
</div>
width: 75%;
+
}
+
  
.container.\35 0\25 {
+
</div>
width: 50%;
+
</div>
}
+
</div>
  
.container.\32 5\25 {
+
</div>
width: 25%;
+
}
+
  
.container {
 
width: 100% !important;
 
}
 
 
}
 
 
/* Grid */
 
 
.row {
 
border-bottom: solid 1px transparent;
 
-moz-box-sizing: border-box;
 
-webkit-box-sizing: border-box;
 
box-sizing: border-box;
 
}
 
 
.row > * {
 
float: left;
 
-moz-box-sizing: border-box;
 
-webkit-box-sizing: border-box;
 
box-sizing: border-box;
 
}
 
 
.row:after, .row:before {
 
content: '';
 
display: block;
 
clear: both;
 
height: 0;
 
}
 
 
.row.uniform > * > :first-child {
 
margin-top: 0;
 
}
 
 
.row.uniform > * > :last-child {
 
margin-bottom: 0;
 
}
 
 
.row.\30 \25 > * {
 
padding: 0px 0 0 0px;
 
}
 
 
.row.\30 \25 {
 
margin: 0px 0 -1px 0px;
 
}
 
 
.row.uniform.\30 \25 > * {
 
padding: 0px 0 0 0px;
 
}
 
 
.row.uniform.\30 \25 {
 
margin: 0px 0 -1px 0px;
 
}
 
 
.row > * {
 
padding: 48px 0 0 48px;
 
}
 
 
.row {
 
margin: -48px 0 -1px -48px;
 
}
 
 
.row.uniform > * {
 
padding: 48px 0 0 48px;
 
}
 
 
.row.uniform {
 
margin: -48px 0 -1px -48px;
 
}
 
 
.row.\32 00\25 > * {
 
padding: 96px 0 0 96px;
 
}
 
 
.row.\32 00\25 {
 
margin: -96px 0 -1px -96px;
 
}
 
 
.row.uniform.\32 00\25 > * {
 
padding: 96px 0 0 96px;
 
}
 
 
.row.uniform.\32 00\25 {
 
margin: -96px 0 -1px -96px;
 
}
 
 
.row.\31 50\25 > * {
 
padding: 72px 0 0 72px;
 
}
 
 
.row.\31 50\25 {
 
margin: -72px 0 -1px -72px;
 
}
 
 
.row.uniform.\31 50\25 > * {
 
padding: 72px 0 0 72px;
 
}
 
 
.row.uniform.\31 50\25 {
 
margin: -72px 0 -1px -72px;
 
}
 
 
.row.\35 0\25 > * {
 
padding: 24px 0 0 24px;
 
}
 
 
.row.\35 0\25 {
 
margin: -24px 0 -1px -24px;
 
}
 
 
.row.uniform.\35 0\25 > * {
 
padding: 24px 0 0 24px;
 
}
 
 
.row.uniform.\35 0\25 {
 
margin: -24px 0 -1px -24px;
 
}
 
 
.row.\32 5\25 > * {
 
padding: 12px 0 0 12px;
 
}
 
 
.row.\32 5\25 {
 
margin: -12px 0 -1px -12px;
 
}
 
 
.row.uniform.\32 5\25 > * {
 
padding: 12px 0 0 12px;
 
}
 
 
.row.uniform.\32 5\25 {
 
margin: -12px 0 -1px -12px;
 
}
 
 
.\31 2u, .\31 2u\24 {
 
width: 100%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\31 1u, .\31 1u\24 {
 
width: 91.6666666667%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\31 0u, .\31 0u\24 {
 
width: 83.3333333333%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\39 u, .\39 u\24 {
 
width: 75%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\38 u, .\38 u\24 {
 
width: 66.6666666667%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\37 u, .\37 u\24 {
 
width: 58.3333333333%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\36 u, .\36 u\24 {
 
width: 50%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\35 u, .\35 u\24 {
 
width: 41.6666666667%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\34 u, .\34 u\24 {
 
width: 33.3333333333%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\33 u, .\33 u\24 {
 
width: 25%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\32 u, .\32 u\24 {
 
width: 16.6666666667%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\31 u, .\31 u\24 {
 
width: 8.3333333333%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\31 2u\24 + *,
 
.\31 1u\24 + *,
 
.\31 0u\24 + *,
 
.\39 u\24 + *,
 
.\38 u\24 + *,
 
.\37 u\24 + *,
 
.\36 u\24 + *,
 
.\35 u\24 + *,
 
.\34 u\24 + *,
 
.\33 u\24 + *,
 
.\32 u\24 + *,
 
.\31 u\24 + * {
 
clear: left;
 
}
 
 
.\-11u {
 
margin-left: 91.66667%;
 
}
 
 
.\-10u {
 
margin-left: 83.33333%;
 
}
 
 
.\-9u {
 
margin-left: 75%;
 
}
 
 
.\-8u {
 
margin-left: 66.66667%;
 
}
 
 
.\-7u {
 
margin-left: 58.33333%;
 
}
 
 
.\-6u {
 
margin-left: 50%;
 
}
 
 
.\-5u {
 
margin-left: 41.66667%;
 
}
 
 
.\-4u {
 
margin-left: 33.33333%;
 
}
 
 
.\-3u {
 
margin-left: 25%;
 
}
 
 
.\-2u {
 
margin-left: 16.66667%;
 
}
 
 
.\-1u {
 
margin-left: 8.33333%;
 
}
 
 
@media screen and (max-width: 1680px) {
 
 
.row > * {
 
padding: 48px 0 0 48px;
 
}
 
 
.row {
 
margin: -48px 0 -1px -48px;
 
}
 
 
.row.uniform > * {
 
padding: 48px 0 0 48px;
 
}
 
 
.row.uniform {
 
margin: -48px 0 -1px -48px;
 
}
 
 
.row.\32 00\25 > * {
 
padding: 96px 0 0 96px;
 
}
 
 
.row.\32 00\25 {
 
margin: -96px 0 -1px -96px;
 
}
 
 
.row.uniform.\32 00\25 > * {
 
padding: 96px 0 0 96px;
 
}
 
 
.row.uniform.\32 00\25 {
 
margin: -96px 0 -1px -96px;
 
}
 
 
.row.\31 50\25 > * {
 
padding: 72px 0 0 72px;
 
}
 
 
.row.\31 50\25 {
 
margin: -72px 0 -1px -72px;
 
}
 
 
.row.uniform.\31 50\25 > * {
 
padding: 72px 0 0 72px;
 
}
 
 
.row.uniform.\31 50\25 {
 
margin: -72px 0 -1px -72px;
 
}
 
 
.row.\35 0\25 > * {
 
padding: 24px 0 0 24px;
 
}
 
 
.row.\35 0\25 {
 
margin: -24px 0 -1px -24px;
 
}
 
 
.row.uniform.\35 0\25 > * {
 
padding: 24px 0 0 24px;
 
}
 
 
.row.uniform.\35 0\25 {
 
margin: -24px 0 -1px -24px;
 
}
 
 
.row.\32 5\25 > * {
 
padding: 12px 0 0 12px;
 
}
 
 
.row.\32 5\25 {
 
margin: -12px 0 -1px -12px;
 
}
 
 
.row.uniform.\32 5\25 > * {
 
padding: 12px 0 0 12px;
 
}
 
 
.row.uniform.\32 5\25 {
 
margin: -12px 0 -1px -12px;
 
}
 
 
.\31 2u\28wide\29, .\31 2u\24\28wide\29 {
 
width: 100%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\31 1u\28wide\29, .\31 1u\24\28wide\29 {
 
width: 91.6666666667%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\31 0u\28wide\29, .\31 0u\24\28wide\29 {
 
width: 83.3333333333%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\39 u\28wide\29, .\39 u\24\28wide\29 {
 
width: 75%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\38 u\28wide\29, .\38 u\24\28wide\29 {
 
width: 66.6666666667%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\37 u\28wide\29, .\37 u\24\28wide\29 {
 
width: 58.3333333333%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\36 u\28wide\29, .\36 u\24\28wide\29 {
 
width: 50%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\35 u\28wide\29, .\35 u\24\28wide\29 {
 
width: 41.6666666667%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\34 u\28wide\29, .\34 u\24\28wide\29 {
 
width: 33.3333333333%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\33 u\28wide\29, .\33 u\24\28wide\29 {
 
width: 25%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\32 u\28wide\29, .\32 u\24\28wide\29 {
 
width: 16.6666666667%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\31 u\28wide\29, .\31 u\24\28wide\29 {
 
width: 8.3333333333%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\31 2u\24\28wide\29 + *,
 
.\31 1u\24\28wide\29 + *,
 
.\31 0u\24\28wide\29 + *,
 
.\39 u\24\28wide\29 + *,
 
.\38 u\24\28wide\29 + *,
 
.\37 u\24\28wide\29 + *,
 
.\36 u\24\28wide\29 + *,
 
.\35 u\24\28wide\29 + *,
 
.\34 u\24\28wide\29 + *,
 
.\33 u\24\28wide\29 + *,
 
.\32 u\24\28wide\29 + *,
 
.\31 u\24\28wide\29 + * {
 
clear: left;
 
}
 
 
.\-11u\28wide\29 {
 
margin-left: 91.66667%;
 
}
 
 
.\-10u\28wide\29 {
 
margin-left: 83.33333%;
 
}
 
 
.\-9u\28wide\29 {
 
margin-left: 75%;
 
}
 
 
.\-8u\28wide\29 {
 
margin-left: 66.66667%;
 
}
 
 
.\-7u\28wide\29 {
 
margin-left: 58.33333%;
 
}
 
 
.\-6u\28wide\29 {
 
margin-left: 50%;
 
}
 
 
.\-5u\28wide\29 {
 
margin-left: 41.66667%;
 
}
 
 
.\-4u\28wide\29 {
 
margin-left: 33.33333%;
 
}
 
 
.\-3u\28wide\29 {
 
margin-left: 25%;
 
}
 
 
.\-2u\28wide\29 {
 
margin-left: 16.66667%;
 
}
 
 
.\-1u\28wide\29 {
 
margin-left: 8.33333%;
 
}
 
 
}
 
 
@media screen and (max-width: 1280px) {
 
 
.row > * {
 
padding: 36px 0 0 36px;
 
}
 
 
.row {
 
margin: -36px 0 -1px -36px;
 
}
 
 
.row.uniform > * {
 
padding: 36px 0 0 36px;
 
}
 
 
.row.uniform {
 
margin: -36px 0 -1px -36px;
 
}
 
 
.row.\32 00\25 > * {
 
padding: 72px 0 0 72px;
 
}
 
 
.row.\32 00\25 {
 
margin: -72px 0 -1px -72px;
 
}
 
 
.row.uniform.\32 00\25 > * {
 
padding: 72px 0 0 72px;
 
}
 
 
.row.uniform.\32 00\25 {
 
margin: -72px 0 -1px -72px;
 
}
 
 
.row.\31 50\25 > * {
 
padding: 54px 0 0 54px;
 
}
 
 
.row.\31 50\25 {
 
margin: -54px 0 -1px -54px;
 
}
 
 
.row.uniform.\31 50\25 > * {
 
padding: 54px 0 0 54px;
 
}
 
 
.row.uniform.\31 50\25 {
 
margin: -54px 0 -1px -54px;
 
}
 
 
.row.\35 0\25 > * {
 
padding: 18px 0 0 18px;
 
}
 
 
.row.\35 0\25 {
 
margin: -18px 0 -1px -18px;
 
}
 
 
.row.uniform.\35 0\25 > * {
 
padding: 18px 0 0 18px;
 
}
 
 
.row.uniform.\35 0\25 {
 
margin: -18px 0 -1px -18px;
 
}
 
 
.row.\32 5\25 > * {
 
padding: 9px 0 0 9px;
 
}
 
 
.row.\32 5\25 {
 
margin: -9px 0 -1px -9px;
 
}
 
 
.row.uniform.\32 5\25 > * {
 
padding: 9px 0 0 9px;
 
}
 
 
.row.uniform.\32 5\25 {
 
margin: -9px 0 -1px -9px;
 
}
 
 
.\31 2u\28normal\29, .\31 2u\24\28normal\29 {
 
width: 100%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\31 1u\28normal\29, .\31 1u\24\28normal\29 {
 
width: 91.6666666667%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\31 0u\28normal\29, .\31 0u\24\28normal\29 {
 
width: 83.3333333333%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\39 u\28normal\29, .\39 u\24\28normal\29 {
 
width: 75%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\38 u\28normal\29, .\38 u\24\28normal\29 {
 
width: 66.6666666667%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\37 u\28normal\29, .\37 u\24\28normal\29 {
 
width: 58.3333333333%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\36 u\28normal\29, .\36 u\24\28normal\29 {
 
width: 50%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\35 u\28normal\29, .\35 u\24\28normal\29 {
 
width: 41.6666666667%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\34 u\28normal\29, .\34 u\24\28normal\29 {
 
width: 33.3333333333%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\33 u\28normal\29, .\33 u\24\28normal\29 {
 
width: 25%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\32 u\28normal\29, .\32 u\24\28normal\29 {
 
width: 16.6666666667%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\31 u\28normal\29, .\31 u\24\28normal\29 {
 
width: 8.3333333333%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\31 2u\24\28normal\29 + *,
 
.\31 1u\24\28normal\29 + *,
 
.\31 0u\24\28normal\29 + *,
 
.\39 u\24\28normal\29 + *,
 
.\38 u\24\28normal\29 + *,
 
.\37 u\24\28normal\29 + *,
 
.\36 u\24\28normal\29 + *,
 
.\35 u\24\28normal\29 + *,
 
.\34 u\24\28normal\29 + *,
 
.\33 u\24\28normal\29 + *,
 
.\32 u\24\28normal\29 + *,
 
.\31 u\24\28normal\29 + * {
 
clear: left;
 
}
 
 
.\-11u\28normal\29 {
 
margin-left: 91.66667%;
 
}
 
 
.\-10u\28normal\29 {
 
margin-left: 83.33333%;
 
}
 
 
.\-9u\28normal\29 {
 
margin-left: 75%;
 
}
 
 
.\-8u\28normal\29 {
 
margin-left: 66.66667%;
 
}
 
 
.\-7u\28normal\29 {
 
margin-left: 58.33333%;
 
}
 
 
.\-6u\28normal\29 {
 
margin-left: 50%;
 
}
 
 
.\-5u\28normal\29 {
 
margin-left: 41.66667%;
 
}
 
 
.\-4u\28normal\29 {
 
margin-left: 33.33333%;
 
}
 
 
.\-3u\28normal\29 {
 
margin-left: 25%;
 
}
 
 
.\-2u\28normal\29 {
 
margin-left: 16.66667%;
 
}
 
 
.\-1u\28normal\29 {
 
margin-left: 8.33333%;
 
}
 
 
}
 
 
@media screen and (max-width: 960px) {
 
 
.row > * {
 
padding: 32px 0 0 32px;
 
}
 
 
.row {
 
margin: -32px 0 -1px -32px;
 
}
 
 
.row.uniform > * {
 
padding: 32px 0 0 32px;
 
}
 
 
.row.uniform {
 
margin: -32px 0 -1px -32px;
 
}
 
 
.row.\32 00\25 > * {
 
padding: 64px 0 0 64px;
 
}
 
 
.row.\32 00\25 {
 
margin: -64px 0 -1px -64px;
 
}
 
 
.row.uniform.\32 00\25 > * {
 
padding: 64px 0 0 64px;
 
}
 
 
.row.uniform.\32 00\25 {
 
margin: -64px 0 -1px -64px;
 
}
 
 
.row.\31 50\25 > * {
 
padding: 48px 0 0 48px;
 
}
 
 
.row.\31 50\25 {
 
margin: -48px 0 -1px -48px;
 
}
 
 
.row.uniform.\31 50\25 > * {
 
padding: 48px 0 0 48px;
 
}
 
 
.row.uniform.\31 50\25 {
 
margin: -48px 0 -1px -48px;
 
}
 
 
.row.\35 0\25 > * {
 
padding: 16px 0 0 16px;
 
}
 
 
.row.\35 0\25 {
 
margin: -16px 0 -1px -16px;
 
}
 
 
.row.uniform.\35 0\25 > * {
 
padding: 16px 0 0 16px;
 
}
 
 
.row.uniform.\35 0\25 {
 
margin: -16px 0 -1px -16px;
 
}
 
 
.row.\32 5\25 > * {
 
padding: 8px 0 0 8px;
 
}
 
 
.row.\32 5\25 {
 
margin: -8px 0 -1px -8px;
 
}
 
 
.row.uniform.\32 5\25 > * {
 
padding: 8px 0 0 8px;
 
}
 
 
.row.uniform.\32 5\25 {
 
margin: -8px 0 -1px -8px;
 
}
 
 
.\31 2u\28narrow\29, .\31 2u\24\28narrow\29 {
 
width: 100%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\31 1u\28narrow\29, .\31 1u\24\28narrow\29 {
 
width: 91.6666666667%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\31 0u\28narrow\29, .\31 0u\24\28narrow\29 {
 
width: 83.3333333333%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\39 u\28narrow\29, .\39 u\24\28narrow\29 {
 
width: 75%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\38 u\28narrow\29, .\38 u\24\28narrow\29 {
 
width: 66.6666666667%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\37 u\28narrow\29, .\37 u\24\28narrow\29 {
 
width: 58.3333333333%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\36 u\28narrow\29, .\36 u\24\28narrow\29 {
 
width: 50%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\35 u\28narrow\29, .\35 u\24\28narrow\29 {
 
width: 41.6666666667%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\34 u\28narrow\29, .\34 u\24\28narrow\29 {
 
width: 33.3333333333%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\33 u\28narrow\29, .\33 u\24\28narrow\29 {
 
width: 25%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\32 u\28narrow\29, .\32 u\24\28narrow\29 {
 
width: 16.6666666667%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\31 u\28narrow\29, .\31 u\24\28narrow\29 {
 
width: 8.3333333333%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\31 2u\24\28narrow\29 + *,
 
.\31 1u\24\28narrow\29 + *,
 
.\31 0u\24\28narrow\29 + *,
 
.\39 u\24\28narrow\29 + *,
 
.\38 u\24\28narrow\29 + *,
 
.\37 u\24\28narrow\29 + *,
 
.\36 u\24\28narrow\29 + *,
 
.\35 u\24\28narrow\29 + *,
 
.\34 u\24\28narrow\29 + *,
 
.\33 u\24\28narrow\29 + *,
 
.\32 u\24\28narrow\29 + *,
 
.\31 u\24\28narrow\29 + * {
 
clear: left;
 
}
 
 
.\-11u\28narrow\29 {
 
margin-left: 91.66667%;
 
}
 
 
.\-10u\28narrow\29 {
 
margin-left: 83.33333%;
 
}
 
 
.\-9u\28narrow\29 {
 
margin-left: 75%;
 
}
 
 
.\-8u\28narrow\29 {
 
margin-left: 66.66667%;
 
}
 
 
.\-7u\28narrow\29 {
 
margin-left: 58.33333%;
 
}
 
 
.\-6u\28narrow\29 {
 
margin-left: 50%;
 
}
 
 
.\-5u\28narrow\29 {
 
margin-left: 41.66667%;
 
}
 
 
.\-4u\28narrow\29 {
 
margin-left: 33.33333%;
 
}
 
 
.\-3u\28narrow\29 {
 
margin-left: 25%;
 
}
 
 
.\-2u\28narrow\29 {
 
margin-left: 16.66667%;
 
}
 
 
.\-1u\28narrow\29 {
 
margin-left: 8.33333%;
 
}
 
 
}
 
 
@media screen and (max-width: 840px) {
 
 
.row > * {
 
padding: 32px 0 0 32px;
 
}
 
 
.row {
 
margin: -32px 0 -1px -32px;
 
}
 
 
.row.uniform > * {
 
padding: 32px 0 0 32px;
 
}
 
 
.row.uniform {
 
margin: -32px 0 -1px -32px;
 
}
 
 
.row.\32 00\25 > * {
 
padding: 64px 0 0 64px;
 
}
 
 
.row.\32 00\25 {
 
margin: -64px 0 -1px -64px;
 
}
 
 
.row.uniform.\32 00\25 > * {
 
padding: 64px 0 0 64px;
 
}
 
 
.row.uniform.\32 00\25 {
 
margin: -64px 0 -1px -64px;
 
}
 
 
.row.\31 50\25 > * {
 
padding: 48px 0 0 48px;
 
}
 
 
.row.\31 50\25 {
 
margin: -48px 0 -1px -48px;
 
}
 
 
.row.uniform.\31 50\25 > * {
 
padding: 48px 0 0 48px;
 
}
 
 
.row.uniform.\31 50\25 {
 
margin: -48px 0 -1px -48px;
 
}
 
 
.row.\35 0\25 > * {
 
padding: 16px 0 0 16px;
 
}
 
 
.row.\35 0\25 {
 
margin: -16px 0 -1px -16px;
 
}
 
 
.row.uniform.\35 0\25 > * {
 
padding: 16px 0 0 16px;
 
}
 
 
.row.uniform.\35 0\25 {
 
margin: -16px 0 -1px -16px;
 
}
 
 
.row.\32 5\25 > * {
 
padding: 8px 0 0 8px;
 
}
 
 
.row.\32 5\25 {
 
margin: -8px 0 -1px -8px;
 
}
 
 
.row.uniform.\32 5\25 > * {
 
padding: 8px 0 0 8px;
 
}
 
 
.row.uniform.\32 5\25 {
 
margin: -8px 0 -1px -8px;
 
}
 
 
.\31 2u\28narrower\29, .\31 2u\24\28narrower\29 {
 
width: 100%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\31 1u\28narrower\29, .\31 1u\24\28narrower\29 {
 
width: 91.6666666667%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\31 0u\28narrower\29, .\31 0u\24\28narrower\29 {
 
width: 83.3333333333%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\39 u\28narrower\29, .\39 u\24\28narrower\29 {
 
width: 75%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\38 u\28narrower\29, .\38 u\24\28narrower\29 {
 
width: 66.6666666667%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\37 u\28narrower\29, .\37 u\24\28narrower\29 {
 
width: 58.3333333333%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\36 u\28narrower\29, .\36 u\24\28narrower\29 {
 
width: 50%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\35 u\28narrower\29, .\35 u\24\28narrower\29 {
 
width: 41.6666666667%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\34 u\28narrower\29, .\34 u\24\28narrower\29 {
 
width: 33.3333333333%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\33 u\28narrower\29, .\33 u\24\28narrower\29 {
 
width: 25%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\32 u\28narrower\29, .\32 u\24\28narrower\29 {
 
width: 16.6666666667%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\31 u\28narrower\29, .\31 u\24\28narrower\29 {
 
width: 8.3333333333%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\31 2u\24\28narrower\29 + *,
 
.\31 1u\24\28narrower\29 + *,
 
.\31 0u\24\28narrower\29 + *,
 
.\39 u\24\28narrower\29 + *,
 
.\38 u\24\28narrower\29 + *,
 
.\37 u\24\28narrower\29 + *,
 
.\36 u\24\28narrower\29 + *,
 
.\35 u\24\28narrower\29 + *,
 
.\34 u\24\28narrower\29 + *,
 
.\33 u\24\28narrower\29 + *,
 
.\32 u\24\28narrower\29 + *,
 
.\31 u\24\28narrower\29 + * {
 
clear: left;
 
}
 
 
.\-11u\28narrower\29 {
 
margin-left: 91.66667%;
 
}
 
 
.\-10u\28narrower\29 {
 
margin-left: 83.33333%;
 
}
 
 
.\-9u\28narrower\29 {
 
margin-left: 75%;
 
}
 
 
.\-8u\28narrower\29 {
 
margin-left: 66.66667%;
 
}
 
 
.\-7u\28narrower\29 {
 
margin-left: 58.33333%;
 
}
 
 
.\-6u\28narrower\29 {
 
margin-left: 50%;
 
}
 
 
.\-5u\28narrower\29 {
 
margin-left: 41.66667%;
 
}
 
 
.\-4u\28narrower\29 {
 
margin-left: 33.33333%;
 
}
 
 
.\-3u\28narrower\29 {
 
margin-left: 25%;
 
}
 
 
.\-2u\28narrower\29 {
 
margin-left: 16.66667%;
 
}
 
 
.\-1u\28narrower\29 {
 
margin-left: 8.33333%;
 
}
 
 
}
 
 
@media screen and (max-width: 736px) {
 
 
.row > * {
 
padding: 20px 0 0 20px;
 
}
 
 
.row {
 
margin: -20px 0 -1px -20px;
 
}
 
 
.row.uniform > * {
 
padding: 20px 0 0 20px;
 
}
 
 
.row.uniform {
 
margin: -20px 0 -1px -20px;
 
}
 
 
.row.\32 00\25 > * {
 
padding: 40px 0 0 40px;
 
}
 
 
.row.\32 00\25 {
 
margin: -40px 0 -1px -40px;
 
}
 
 
.row.uniform.\32 00\25 > * {
 
padding: 40px 0 0 40px;
 
}
 
 
.row.uniform.\32 00\25 {
 
margin: -40px 0 -1px -40px;
 
}
 
 
.row.\31 50\25 > * {
 
padding: 30px 0 0 30px;
 
}
 
 
.row.\31 50\25 {
 
margin: -30px 0 -1px -30px;
 
}
 
 
.row.uniform.\31 50\25 > * {
 
padding: 30px 0 0 30px;
 
}
 
 
.row.uniform.\31 50\25 {
 
margin: -30px 0 -1px -30px;
 
}
 
 
.row.\35 0\25 > * {
 
padding: 10px 0 0 10px;
 
}
 
 
.row.\35 0\25 {
 
margin: -10px 0 -1px -10px;
 
}
 
 
.row.uniform.\35 0\25 > * {
 
padding: 10px 0 0 10px;
 
}
 
 
.row.uniform.\35 0\25 {
 
margin: -10px 0 -1px -10px;
 
}
 
 
.row.\32 5\25 > * {
 
padding: 5px 0 0 5px;
 
}
 
 
.row.\32 5\25 {
 
margin: -5px 0 -1px -5px;
 
}
 
 
.row.uniform.\32 5\25 > * {
 
padding: 5px 0 0 5px;
 
}
 
 
.row.uniform.\32 5\25 {
 
margin: -5px 0 -1px -5px;
 
}
 
 
.\31 2u\28mobile\29, .\31 2u\24\28mobile\29 {
 
width: 100%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\31 1u\28mobile\29, .\31 1u\24\28mobile\29 {
 
width: 91.6666666667%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\31 0u\28mobile\29, .\31 0u\24\28mobile\29 {
 
width: 83.3333333333%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\39 u\28mobile\29, .\39 u\24\28mobile\29 {
 
width: 75%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\38 u\28mobile\29, .\38 u\24\28mobile\29 {
 
width: 66.6666666667%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\37 u\28mobile\29, .\37 u\24\28mobile\29 {
 
width: 58.3333333333%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\36 u\28mobile\29, .\36 u\24\28mobile\29 {
 
width: 50%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\35 u\28mobile\29, .\35 u\24\28mobile\29 {
 
width: 41.6666666667%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\34 u\28mobile\29, .\34 u\24\28mobile\29 {
 
width: 33.3333333333%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\33 u\28mobile\29, .\33 u\24\28mobile\29 {
 
width: 25%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\32 u\28mobile\29, .\32 u\24\28mobile\29 {
 
width: 16.6666666667%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\31 u\28mobile\29, .\31 u\24\28mobile\29 {
 
width: 8.3333333333%;
 
clear: none;
 
margin-left: 0;
 
}
 
 
.\31 2u\24\28mobile\29 + *,
 
.\31 1u\24\28mobile\29 + *,
 
.\31 0u\24\28mobile\29 + *,
 
.\39 u\24\28mobile\29 + *,
 
.\38 u\24\28mobile\29 + *,
 
.\37 u\24\28mobile\29 + *,
 
.\36 u\24\28mobile\29 + *,
 
.\35 u\24\28mobile\29 + *,
 
.\34 u\24\28mobile\29 + *,
 
.\33 u\24\28mobile\29 + *,
 
.\32 u\24\28mobile\29 + *,
 
.\31 u\24\28mobile\29 + * {
 
clear: left;
 
}
 
 
.\-11u\28mobile\29 {
 
margin-left: 91.66667%;
 
}
 
 
.\-10u\28mobile\29 {
 
margin-left: 83.33333%;
 
}
 
 
.\-9u\28mobile\29 {
 
margin-left: 75%;
 
}
 
 
.\-8u\28mobile\29 {
 
margin-left: 66.66667%;
 
}
 
 
.\-7u\28mobile\29 {
 
margin-left: 58.33333%;
 
}
 
 
.\-6u\28mobile\29 {
 
margin-left: 50%;
 
}
 
 
.\-5u\28mobile\29 {
 
margin-left: 41.66667%;
 
}
 
 
.\-4u\28mobile\29 {
 
margin-left: 33.33333%;
 
}
 
 
.\-3u\28mobile\29 {
 
margin-left: 25%;
 
}
 
 
.\-2u\28mobile\29 {
 
margin-left: 16.66667%;
 
}
 
 
.\-1u\28mobile\29 {
 
margin-left: 8.33333%;
 
}
 
 
}
 
 
/* Basic */
 
 
body {
 
background: #f0f4f4;
 
color: #5b5b5b;
 
font-size: 15pt;
 
line-height: 1.85em;
 
font-family: 'Source Sans Pro', sans-serif !important;
 
font-weight: 300; /* Rebekah - changing to "normal" doesn't solve the problem */
 
}
 
 
body.is-loading *, body.is-loading *:after, body.is-loading *:before {
 
-moz-transition: none !important;
 
-webkit-transition: none !important;
 
-ms-transition: none !important;
 
transition: none !important;
 
-moz-animation: none !important;
 
-webkit-animation: none !important;
 
-ms-animation: none !important;
 
animation: none !important;
 
}
 
 
input, textarea, select {
 
font-size: 15pt;
 
line-height: 1.85em;
 
font-family: 'Source Sans Pro', sans-serif !important;
 
font-weight: 300;
 
}
 
 
h1, h2, h3, h4, h5, h6 {
 
font-weight: 400;
 
color: #483949;
 
line-height: 1.25em;
 
}
 
 
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
 
color: inherit;
 
text-decoration: none;
 
border-bottom-color: transparent;
 
}
 
 
h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong {
 
font-weight: 600;
 
}
 
 
h2 {
 
font-size: 2.85em;
 
}
 
 
h3 {
 
font-size: 1.25em;
 
}
 
 
h4 {
 
font-size: 1em;
 
margin: 0 0 0.25em 0;
 
}
 
 
strong, b {
 
font-weight: 400;
 
color: #483949;
 
}
 
 
em, i {
 
font-style: italic;
 
}
 
 
a {
 
color: inherit;
 
border-bottom: solid 1px rgba(128, 128, 128, 0.15);
 
text-decoration: none !important;
 
-moz-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
 
-webkit-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
 
-ms-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
 
transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
 
}
 
 
a:hover {
 
color: #ef8376;
 
border-bottom-color: transparent;
 
}
 
 
sub {
 
position: relative;
 
top: 0.5em;
 
font-size: 0.8em;
 
}
 
 
sup {
 
position: relative;
 
top: -0.5em;
 
font-size: 0.8em;
 
}
 
 
blockquote {
 
border-left: solid 0.5em #ddd;
 
padding: 1em 0 1em 2em;
 
font-style: italic;
 
}
 
 
p, ul, ol, dl, table {
 
margin-bottom: 1em;
 
}
 
 
p {
 
text-align: justify;
 
/* Rebekah's sad attempt
 
color: #5b5b5b;
 
font-size: 15pt;
 
line-height: 1.85em;
 
font-family: 'Source Sans Pro', sans-serif !important;
 
font-weight: 300;
 
*/
 
 
 
}
 
 
br.clear {
 
clear: both;
 
}
 
 
hr {
 
position: relative;
 
display: block;
 
border: 0;
 
top: 4.5em;
 
margin-bottom: 9em;
 
height: 6px;
 
border-top: solid 1px rgba(128, 128, 128, 0.2);
 
border-bottom: solid 1px rgba(128, 128, 128, 0.2);
 
}
 
 
hr:before, hr:after {
 
content: '';
 
position: absolute;
 
top: -8px;
 
display: block;
 
width: 1px;
 
height: 21px;
 
background: rgba(128, 128, 128, 0.2);
 
}
 
 
hr:before {
 
left: -1px;
 
}
 
 
hr:after {
 
right: -1px;
 
}
 
 
.timestamp {
 
color: rgba(128, 128, 128, 0.75);
 
font-size: 0.8em;
 
}
 
 
/* Sections/Article */
 
 
section, article {
 
margin-bottom: 3em;
 
}
 
 
section > :last-child, section:last-child, article > :last-child, article:last-child {
 
margin-bottom: 0;
 
}
 
 
section.special > header, section.special > footer, article.special > header, article.special > footer {
 
text-align: center;
 
}
 
 
.row > section, .row > article {
 
margin-bottom: 0;
 
}
 
 
header {
 
margin: 0 0 1em 0;
 
}
 
 
header > p {
 
display: block;
 
font-size: 1.5em;
 
margin: 1em 0 2em 0;
 
line-height: 1.5em;
 
text-align: inherit;
 
}
 
 
footer {
 
margin: 2.5em 0 0 0;
 
}
 
 
/* Image */
 
 
.image {
 
position: relative;
 
display: inline-block;
 
border: 0;
 
outline: 0;
 
}
 
 
.image img {
 
display: block;
 
width: 100%;
 
}
 
 
.image.fit {
 
display: block;
 
width: 100%;
 
}
 
 
.image.featured {
 
display: block;
 
width: 100%;
 
margin: 0 0 4em 0;
 
}
 
 
.image.left {
 
float: left;
 
margin: 0 2em 2em 0;
 
}
 
 
.image.centered {
 
display: block;
 
margin: 0 0 2em 0;
 
}
 
 
.image.centered img {
 
margin: 0 auto;
 
width: auto;
 
}
 
 
/* List */
 
 
ul.default {
 
list-style: disc;
 
padding-left: 1em;
 
}
 
 
ul.default li {
 
padding-left: 0.5em;
 
}
 
 
ul.actions {
 
margin: 3em 0 0 0;
 
}
 
 
form ul.actions {
 
margin-top: 0;
 
}
 
 
ul.actions li {
 
display: inline-block;
 
margin: 0 0.75em 0 0.75em;
 
}
 
 
ul.actions li:first-child {
 
margin-left: 0;
 
}
 
 
ul.actions li:last-child {
 
margin-right: 0;
 
}
 
 
ul.divided li {
 
border-top: solid 1px rgba(128, 128, 128, 0.2);
 
padding-top: 1.5em;
 
margin-top: 1.5em;
 
}
 
 
ul.divided li:first-child {
 
border-top: 0;
 
padding-top: 0;
 
margin-top: 0;
 
}
 
 
ul.menu {
 
height: 1em;
 
line-height: 1em;
 
}
 
 
ul.menu li {
 
display: inline-block;
 
border-left: solid 1px rgba(128, 128, 128, 0.2);
 
padding-left: 1.25em;
 
margin-left: 1.25em;
 
}
 
 
ul.menu li:first-child {
 
border-left: 0;
 
padding-left: 0;
 
margin-left: 0;
 
}
 
 
ul.icons {
 
position: relative;
 
background: rgba(128, 128, 128, 0.05);
 
border-radius: 4em;
 
display: inline-block;
 
padding: 0.35em 0.75em 0.35em 0.75em;
 
font-size: 1.25em;
 
cursor: default;
 
}
 
 
ul.icons li {
 
display: inline-block;
 
}
 
 
ul.icons li a {
 
display: inline-block;
 
background: none;
 
width: 2.5em;
 
height: 2.5em;
 
line-height: 2.5em;
 
text-align: center;
 
border-radius: 100%;
 
border: 0;
 
color: inherit;
 
}
 
 
ul.icons li a:hover {
 
color: #ef8376;
 
}
 
 
ol.default {
 
list-style: decimal;
 
padding-left: 1.25em;
 
}
 
 
ol.default li {
 
padding-left: 0.25em;
 
}
 
 
/* Form */
 
 
form label {
 
display: block;
 
font-weight: 400;
 
color: #483949;
 
margin: 0 0 1em 0;
 
}
 
 
form input[type="text"],
 
form input[type="email"],
 
form input[type="password"],
 
form select,
 
form textarea {
 
-webkit-appearance: none;
 
display: block;
 
border: 0;
 
background: #fafafa;
 
width: 100%;
 
border-radius: 0.5em;
 
border: solid 1px #E5E5E5;
 
padding: 1em;
 
-moz-transition: background-color 0.35s ease-in-out, border-color 0.35s ease-in-out;
 
-webkit-transition: background-color 0.35s ease-in-out, border-color 0.35s ease-in-out;
 
-ms-transition: background-color 0.35s ease-in-out, border-color 0.35s ease-in-out;
 
transition: background-color 0.35s ease-in-out, border-color 0.35s ease-in-out;
 
}
 
 
form input[type="text"]:focus,
 
form input[type="email"]:focus,
 
form input[type="password"]:focus,
 
form select:focus,
 
form textarea:focus {
 
background: #fff;
 
border-color: #df7366;
 
}
 
 
form input[type="text"],
 
form input[type="email"],
 
form input[type="password"],
 
form select {
 
line-height: 1em;
 
}
 
 
form textarea {
 
min-height: 9em;
 
}
 
 
form .formerize-placeholder {
 
color: #555 !important;
 
}
 
 
form ::-webkit-input-placeholder {
 
color: #555 !important;
 
}
 
 
form :-moz-placeholder {
 
color: #555 !important;
 
}
 
 
form ::-moz-placeholder {
 
color: #555 !important;
 
}
 
 
form :-ms-input-placeholder {
 
color: #555 !important;
 
}
 
 
form ::-moz-focus-inner {
 
border: 0;
 
}
 
 
/* Table */
 
 
table {
 
width: 100%;
 
}
 
 
table.default {
 
width: 100%;
 
}
 
 
table.default tbody tr {
 
border-top: solid 1px #e5e5e5;
 
}
 
 
table.default tbody tr:first-child {
 
border-top: 0;
 
}
 
 
table.default tbody tr:nth-child(2n+1) {
 
background: #fafafa;
 
}
 
 
table.default td {
 
padding: 0.5em 1em 0.5em 1em;
 
}
 
 
table.default th {
 
text-align: left;
 
font-weight: 400;
 
padding: 0.5em 1em 0.5em 1em;
 
}
 
 
table.default thead {
 
border-bottom: solid 2px #e5e5e5;
 
}
 
 
table.default tfoot {
 
border-top: solid 2px #e5e5e5;
 
}
 
 
/* Button */
 
 
input[type="button"],
 
input[type="submit"],
 
input[type="reset"],
 
button,
 
.button {
 
position: relative;
 
display: inline-block;
 
background: #df7366;
 
color: #fff;
 
text-align: center;
 
border-radius: 0.5em;
 
text-decoration: none;
 
padding: 0.65em 3em 0.65em 3em;
 
border: 0;
 
cursor: pointer;
 
outline: 0;
 
font-weight: 300;
 
-moz-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
 
-webkit-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
 
-ms-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
 
transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
 
}
 
 
input[type="button"]:hover,
 
input[type="submit"]:hover,
 
input[type="reset"]:hover,
 
button:hover,
 
.button:hover {
 
color: #fff;
 
background: #ef8376;
 
}
 
 
input[type="button"].alt,
 
input[type="submit"].alt,
 
input[type="reset"].alt,
 
button.alt,
 
.button.alt {
 
background: #2B252C;
 
}
 
 
input[type="button"].alt:hover,
 
input[type="submit"].alt:hover,
 
input[type="reset"].alt:hover,
 
button.alt:hover,
 
.button.alt:hover {
 
background: #3B353C;
 
}
 
 
/* Post */
 
 
.post.stub {
 
text-align: center;
 
}
 
 
.post.stub header {
 
margin: 0;
 
}
 
 
/* Icons */
 
 
.icon {
 
text-decoration: none;
 
}
 
 
.icon:before {
 
display: inline-block;
 
font-family: FontAwesome !important;
 
font-size: 1.25em;
 
text-decoration: none;
 
font-style: normal;
 
font-weight: normal;
 
line-height: 1;
 
-webkit-font-smoothing: antialiased;
 
-moz-osx-font-smoothing: grayscale;
 
}
 
 
.icon > .label {
 
display: none;
 
}
 
 
.icon.circled {
 
position: relative;
 
display: inline-block;
 
background: #2b252c;
 
color: #fff;
 
border-radius: 100%;
 
width: 3em;
 
height: 3em;
 
line-height: 3.25em;
 
text-align: center;
 
font-size: 1.25em;
 
}
 
 
header .icon.circled {
 
margin: 0 0 2em 0;
 
}
 
 
/* Wrapper */
 
 
.wrapper {
 
background: #fff;
 
margin: 0 0 2em 0;
 
padding: 6em 0 6em 0;
 
}
 
 
.wrapper.style2 {
 
padding-top: 0;
 
}
 
 
/* Header */
 
 
#header {
 
position: relative;
 
background-image: url("https://static.igem.org/mediawiki/2016/b/b4/T--Harvard_BioDesign--images_header.jpg");
 
background-size: cover;
 
background-position: center center;
 
background-attachment: fixed;
 
color: #fff;
 
text-align: center;
 
padding: 7.5em 0 2em 0;
 
cursor: default;
 
}
 
 
#header:before {
 
content: '';
 
display: inline-block;
 
vertical-align: middle;
 
height: 100%;
 
}
 
 
#header .inner {
 
position: relative;
 
z-index: 1;
 
margin: 0;
 
display: inline-block;
 
vertical-align: middle;
 
}
 
 
#header header {
 
display: inline-block;
 
}
 
 
#header header > p {
 
font-size: 1.25em;
 
margin: 0;
 
}
 
 
#header h1 {
 
color: #fff;
 
font-size: 3em;
 
line-height: 1em;
 
}
 
 
#header h1 a {
 
color: inherit;
 
}
 
 
#header .button {
 
display: inline-block;
 
border-radius: 100%;
 
width: 4.5em;
 
height: 4.5em;
 
line-height: 4.5em;
 
text-align: center;
 
font-size: 1.25em;
 
padding: 0;
 
}
 
 
#header hr {
 
top: 1.5em;
 
margin-bottom: 3em;
 
border-bottom-color: rgba(192, 192, 192, 0.35);
 
box-shadow: inset 0 1px 0 0 rgba(192, 192, 192, 0.35);
 
}
 
 
#header hr:before, #header hr:after {
 
background: rgba(192, 192, 192, 0.35);
 
}
 
 
#header footer {
 
margin: 1em 0 0 0;
 
}
 
 
body.homepage #header {
 
height: 100vh;
 
min-height: 40em;
 
}
 
 
body.homepage #header h1 {
 
font-size: 4em;
 
}
 
 
body.homepage #header:after {
 
content: '';
 
background: #1C0920;
 
display: block;
 
position: absolute;
 
left: 0;
 
top: 0;
 
width: 100%;
 
height: 100%;
 
opacity: 0;
 
-moz-transition: opacity 2.5s ease-in-out;
 
-webkit-transition: opacity 2.5s ease-in-out;
 
-ms-transition: opacity 2.5s ease-in-out;
 
transition: opacity 2.5s ease-in-out;
 
-moz-transition-delay: 0.5s;
 
-webkit-transition-delay: 0.5s;
 
-ms-transition-delay: 0.5s;
 
transition-delay: 0.5s;
 
}
 
 
body.homepage.is-loading #header:after {
 
opacity: 1;
 
}
 
 
/* Nav */
 
 
#nav {
 
position: absolute;
 
top: 0;
 
left: 0;
 
width: 100%;
 
text-align: center;
 
padding: 1.5em 0 1.5em 0;
 
z-index: 1;
 
overflow: hidden;
 
}
 
 
#nav > ul {
 
line-height: 0px;
 
position: relative;
 
display: inline-block;
 
margin: 0;
 
height: 21px;
 
border-left: solid 1px rgba(192, 192, 192, 0.35);
 
border-right: solid 1px rgba(192, 192, 192, 0.35);
 
}
 
 
#nav > ul:before, #nav > ul:after {
 
content: '';
 
display: block;
 
width: 300%;
 
position: absolute;
 
top: 50%;
 
margin-top: -2px;
 
height: 5px;
 
border-top: solid 1px rgba(192, 192, 192, 0.35);
 
border-bottom: solid 1px rgba(192, 192, 192, 0.35);
 
}
 
 
#nav > ul:before {
 
left: 100%;
 
margin-left: 1px;
 
}
 
 
#nav > ul:after {
 
right: 100%;
 
margin-right: 1px;
 
}
 
 
#nav > ul > li {
 
display: inline-block;
 
margin: -9px 0.5em 0 0.5em;
 
border-radius: 0.5em;
 
padding: 0.85em;
 
border: solid 1px transparent;
 
-moz-transition: color 0.35s ease-in-out, border-color 0.35s ease-in-out;
 
-webkit-transition: color 0.35s ease-in-out, border-color 0.35s ease-in-out;
 
-ms-transition: color 0.35s ease-in-out, border-color 0.35s ease-in-out;
 
transition: color 0.35s ease-in-out, border-color 0.35s ease-in-out;
 
}
 
 
#nav > ul > li.active {
 
border-color: rgba(192, 192, 192, 0.35);
 
}
 
 
#nav > ul > li > a, #nav > ul > li > span {
 
display: block;
 
color: inherit;
 
text-decoration: none;
 
border: 0;
 
outline: 0;
 
}
 
 
#nav > ul > li > ul {
 
display: none;
 
}
 
 
.dropotron {
 
background: rgba(255, 255, 255, 0.975);
 
padding: 1em 1.25em 1em 1.25em;
 
line-height: 1em;
 
height: auto;
 
text-align: left;
 
border-radius: 0.5em;
 
box-shadow: 0 0.15em 0.25em 0 rgba(0, 0, 0, 0.25);
 
min-width: 12em;
 
margin-top: -1em;
 
}
 
 
.dropotron li {
 
border-top: solid 1px rgba(128, 128, 128, 0.2);
 
color: #5b5b5b;
 
}
 
 
.dropotron li:first-child {
 
border-top: 0;
 
}
 
 
.dropotron li:hover {
 
color: #ef8376;
 
}
 
 
.dropotron li a, .dropotron li span {
 
display: block;
 
border: 0;
 
padding: 0.5em 0 0.5em 0;
 
-moz-transition: color 0.35s ease-in-out;
 
-webkit-transition: color 0.35s ease-in-out;
 
-ms-transition: color 0.35s ease-in-out;
 
transition: color 0.35s ease-in-out;
 
}
 
 
.dropotron.level-0 {
 
margin-top: 2em;
 
font-size: 0.9em;
 
}
 
 
.dropotron.level-0:before {
 
content: '';
 
position: absolute;
 
left: 50%;
 
top: -0.7em;
 
margin-left: -0.75em;
 
border-bottom: solid 0.75em rgba(255, 255, 255, 0.975);
 
border-left: solid 0.75em rgba(64, 64, 64, 0);
 
border-right: solid 0.75em rgba(64, 64, 64, 0);
 
}
 
 
/* Banner */
 
 
#banner {
 
background: #fff;
 
text-align: center;
 
padding: 4.5em 0 4.5em 0;
 
margin-bottom: 0;
 
}
 
 
#banner header > p {
 
margin-bottom: 0;
 
}
 
 
/* Content */
 
 
#content > hr {
 
top: 3em;
 
margin-bottom: 6em;
 
}
 
 
#content > section {
 
margin-bottom: 0;
 
}
 
 
/* Sidebar */
 
 
#sidebar > hr {
 
top: 3em;
 
margin-bottom: 6em;
 
}
 
 
#sidebar > hr.first {
 
display: none;
 
}
 
 
#sidebar > section {
 
margin-bottom: 0;
 
}
 
 
/* Main */
 
 
#main {
 
margin-bottom: 0;
 
}
 
 
#main section:first-of-type {
 
padding-top: 2em;
 
}
 
 
/* Footer */
 
 
#footer {
 
position: relative;
 
overflow: hidden;
 
padding: 6em 0 6em 0;
 
background: #2b252c;
 
color: #fff;
 
}
 
 
#footer .icon.circled {
 
background: #fff;
 
color: #2b252c;
 
}
 
 
#footer header {
 
text-align: center;
 
cursor: default;
 
}
 
 
#footer h2, #footer h3, #footer h4, #footer h5, #footer h6 {
 
color: #fff;
 
}
 
 
#footer .contact {
 
text-align: center;
 
}
 
 
#footer .contact p {
 
text-align: center;
 
margin: 0 0 3em 0;
 
}
 
 
#footer .copyright {
 
text-align: center;
 
color: rgba(128, 128, 128, 0.75);
 
font-size: 0.8em;
 
cursor: default;
 
}
 
 
#footer .copyright a {
 
color: rgba(128, 128, 128, 0.75);
 
}
 
 
#footer .copyright a:hover {
 
color: rgba(212, 212, 212, 0.85);
 
}
 
 
/* Carousel */
 
 
.carousel {
 
position: relative;
 
overflow: hidden;
 
padding: 2em 0 2em 0;
 
margin-bottom: 0;
 
}
 
 
.carousel .forward, .carousel .backward {
 
position: absolute;
 
top: 50%;
 
width: 6em;
 
height: 12em;
 
margin-top: -6em;
 
cursor: pointer;
 
}
 
 
.carousel .forward:before, .carousel .backward:before {
 
content: '';
 
display: block;
 
width: 6em;
 
height: 6em;
 
border-radius: 100%;
 
background-color: rgba(72, 57, 73, 0.5);
 
position: absolute;
 
top: 50%;
 
margin-top: -3em;
 
-moz-transition: background-color 0.35s ease-in-out;
 
-webkit-transition: background-color 0.35s ease-in-out;
 
-o-transition: background-color 0.35s ease-in-out;
 
-ms-transition: background-color 0.35s ease-in-out;
 
transition: background-color 0.35s ease-in-out;
 
-webkit-backface-visibility: hidden;
 
}
 
 
.carousel .forward:after, .carousel .backward:after {
 
content: '';
 
width: 3em;
 
height: 3em;
 
position: absolute;
 
top: 50%;
 
margin: -1.5em 0 0 0;
 
background: url("https://static.igem.org/mediawiki/2016/e/ea/T--Harvard_BioDesign--assets_css_images_arrows.svg") no-repeat center center;
 
}
 
 
.carousel .forward:hover:before, .carousel .backward:hover:before {
 
background-color: rgba(239, 131, 118, 0.75);
 
}
 
 
.carousel .forward {
 
right: 0;
 
}
 
 
.carousel .forward:before {
 
right: -3em;
 
}
 
 
.carousel .forward:after {
 
right: -0.25em;
 
}
 
 
.carousel .backward {
 
left: 0;
 
}
 
 
.carousel .backward:before {
 
left: -3em;
 
}
 
 
.carousel .backward:after {
 
left: -0.25em;
 
-moz-transform: scaleX(-1);
 
-webkit-transform: scaleX(-1);
 
-ms-transform: scaleX(-1);
 
transform: scaleX(-1);
 
}
 
 
.carousel .reel {
 
white-space: nowrap;
 
position: relative;
 
-webkit-overflow-scrolling: touch;
 
padding: 0 2em 0 2em;
 
}
 
 
.carousel article {
 
display: inline-block;
 
width: 18em;
 
background: #fff;
 
text-align: center;
 
padding: 0 1em 3em 1em;
 
margin: 0 2em 0 0;
 
white-space: normal;
 
opacity: 1.0;
 
-moz-transition: opacity 0.75s ease-in-out;
 
-webkit-transition: opacity 0.75s ease-in-out;
 
-ms-transition: opacity 0.75s ease-in-out;
 
transition: opacity 0.75s ease-in-out;
 
/* Rebekah - lol - solution to align the images vertically */
 
vertical-align: top;
 
 
}
 
 
.carousel article.loading {
 
opacity: 0;
 
}
 
 
.carousel article .image {
 
position: relative;
 
left: -1em;
 
top: 0;
 
width: auto;
 
margin-right: -2em;
 
margin-bottom: 3em;
 
}
 
 
.carousel article p {
 
text-align: center;
 
}
 
 
/* Wide */
 
 
@media screen and (max-width: 1680px) {
 
 
/* Basic */
 
 
body, input, textarea, select {
 
font-size: 14pt;
 
line-height: 1.75em;
 
}
 
 
/* Carousel */
 
 
.carousel {
 
padding: 1.5em 0 1.5em 0;
 
}
 
 
.carousel .reel {
 
padding: 0 1.5em 0 1.5em;
 
}
 
 
.carousel article {
 
width: 18em;
 
margin: 0 1.25em 0 0;
 
}
 
 
}
 
 
/* Normal */
 
 
@media screen and (max-width: 1280px) {
 
 
/* Basic */
 
 
body, input, textarea, select {
 
font-size: 12pt;
 
line-height: 1.5em;
 
}
 
 
/* Wrapper */
 
 
.wrapper {
 
padding-left: 2em;
 
padding-right: 2em;
 
}
 
 
/* Header */
 
 
#header {
 
background-attachment: scroll;
 
}
 
 
#header .inner {
 
padding-left: 2em;
 
padding-right: 2em;
 
}
 
 
/* Banner */
 
 
#banner {
 
padding-left: 2em;
 
padding-right: 2em;
 
}
 
 
/* Footer */
 
 
#footer {
 
padding-left: 2em;
 
padding-right: 2em;
 
}
 
 
}
 
 
/* Narrow */
 
 
/* Narrower */
 
 
@media screen and (max-width: 840px) {
 
 
/* Basic */
 
 
body, input, textarea, select {
 
font-size: 13pt;
 
line-height: 1.65em;
 
}
 
 
.tweet {
 
text-align: center;
 
}
 
 
.timestamp {
 
display: block;
 
text-align: center;
 
}
 
 
/* Footer */
 
 
#footer {
 
padding: 4em 2em 4em 2em;
 
}
 
 
/* Carousel */
 
 
.carousel {
 
padding: 1.25em 0 1.25em 0;
 
}
 
 
.carousel article {
 
width: 18em;
 
margin: 0 1em 0 0;
 
}
 
 
}
 
 
/* Mobile */
 
 
#navPanel, #titleBar {
 
display: none;
 
}
 
 
@media screen and (max-width: 736px) {
 
 
/* Basic */
 
 
html, body {
 
overflow-x: hidden;
 
}
 
 
body, input, textarea, select {
 
font-size: 12.5pt;
 
line-height: 1.5em;
 
}
 
 
h2 {
 
font-size: 1.75em;
 
}
 
 
h3 {
 
font-size: 1.25em;
 
}
 
 
hr {
 
top: 3em;
 
margin-bottom: 6em;
 
}
 
 
/* Section/Article */
 
 
section, article {
 
margin-bottom: 2em;
 
}
 
 
section:last-child, article:last-child {
 
margin-bottom: 0;
 
}
 
 
.row > section, .row > article {
 
margin-bottom: 2em;
 
}
 
 
header > p {
 
font-size: 1.25em;
 
}
 
 
/* Image */
 
 
.image.featured {
 
margin: 0 0 2em 0;
 
}
 
 
.image.left {
 
margin: 0 1em 1em 0;
 
}
 
 
.image.centered {
 
margin: 0 0 1em 0;
 
}
 
 
/* List */
 
 
form ul.actions {
 
margin-top: 0;
 
}
 
 
ul.actions li {
 
display: block;
 
margin: 0.75em 0 0 0;
 
}
 
 
ul.actions li:first-child {
 
margin-top: 0;
 
}
 
 
ul.menu {
 
height: auto;
 
text-align: center;
 
}
 
 
ul.menu li {
 
display: block;
 
border: 0;
 
padding: 0.75em 0 0 0;
 
margin: 0;
 
}
 
 
ul.menu li:first-child {
 
padding-top: 0;
 
}
 
 
ul.icons {
 
font-size: 1em;
 
padding: 0.35em 0.5em 0.35em 0.5em;
 
}
 
 
ul.icons li a {
 
width: 2.25em;
 
}
 
 
/* Button */
 
 
input[type="button"],
 
input[type="submit"],
 
input[type="reset"],
 
button,
 
.button {
 
display: block;
 
padding: 0;
 
line-height: 3em;
 
width: 100%;
 
}
 
 
/* Off-Canvas Navigation */
 
 
#page-wrapper {
 
-moz-backface-visibility: hidden;
 
-webkit-backface-visibility: hidden;
 
-ms-backface-visibility: hidden;
 
backface-visibility: hidden;
 
-moz-transition: -moz-transform 0.5s ease;
 
-webkit-transition: -webkit-transform 0.5s ease;
 
-ms-transition: -ms-transform 0.5s ease;
 
transition: transform 0.5s ease;
 
padding-bottom: 1px;
 
}
 
 
#navButton {
 
-moz-backface-visibility: hidden;
 
-webkit-backface-visibility: hidden;
 
-ms-backface-visibility: hidden;
 
backface-visibility: hidden;
 
-moz-transition: -moz-transform 0.5s ease;
 
-webkit-transition: -webkit-transform 0.5s ease;
 
-ms-transition: -ms-transform 0.5s ease;
 
transition: transform 0.5s ease;
 
display: block;
 
height: 44px;
 
left: 0;
 
position: fixed;
 
top: 0;
 
width: 100%;
 
z-index: 10001;
 
}
 
 
#navButton .toggle {
 
position: absolute;
 
left: 0;
 
top: 0;
 
width: 100%;
 
height: 100%;
 
border: 0;
 
outline: 0;
 
}
 
 
#navButton .toggle:before {
 
font-family: FontAwesome !important;
 
text-decoration: none;
 
font-style: normal;
 
font-weight: normal;
 
-webkit-font-smoothing: antialiased;
 
-moz-osx-font-smoothing: grayscale;
 
content: '\f0c9';
 
color: #fff;
 
color: rgba(255, 255, 255, 0.75);
 
text-align: center;
 
display: block;
 
font-size: 14px;
 
width: 80px;
 
height: 30px;
 
line-height: 30px;
 
position: absolute;
 
left: 50%;
 
margin-left: -40px;
 
background: rgba(132, 128, 136, 0.75);
 
border-top: 0;
 
border-radius: 0 0 0.35em 0.35em;
 
}
 
 
#navPanel {
 
-moz-backface-visibility: hidden;
 
-webkit-backface-visibility: hidden;
 
-ms-backface-visibility: hidden;
 
backface-visibility: hidden;
 
-moz-transform: translateY(-50vh);
 
-webkit-transform: translateY(-50vh);
 
-ms-transform: translateY(-50vh);
 
transform: translateY(-50vh);
 
-moz-transition: -moz-transform 0.5s ease;
 
-webkit-transition: -webkit-transform 0.5s ease;
 
-ms-transition: -ms-transform 0.5s ease;
 
transition: transform 0.5s ease;
 
display: block;
 
height: 50vh;
 
left: 0;
 
overflow-y: auto;
 
position: fixed;
 
top: 0;
 
width: 100%;
 
z-index: 10002;
 
background: #1f1920;
 
box-shadow: inset 0px -2px 5px 0px rgba(0, 0, 0, 0.25);
 
font-size: 1em;
 
}
 
 
#navPanel:before {
 
content: '';
 
display: block;
 
position: absolute;
 
left: 0;
 
top: 0;
 
width: 100%;
 
height: 100%;
 
background: url("images/overlay.png");
 
background-size: 128px 128px;
 
}
 
 
#navPanel .link {
 
position: relative;
 
z-index: 1;
 
display: block;
 
text-decoration: none;
 
padding: 0.5em;
 
color: #ddd;
 
border: 0;
 
border-top: dotted 1px rgba(255, 255, 255, 0.05);
 
}
 
 
#navPanel .link:first-child {
 
border-top: 0;
 
}
 
 
#navPanel .link.depth-0 {
 
color: #fff;
 
font-weight: 600;
 
}
 
 
#navPanel .indent-1 {
 
display: inline-block;
 
width: 1em;
 
}
 
 
#navPanel .indent-2 {
 
display: inline-block;
 
width: 2em;
 
}
 
 
#navPanel .indent-3 {
 
display: inline-block;
 
width: 3em;
 
}
 
 
#navPanel .indent-4 {
 
display: inline-block;
 
width: 4em;
 
}
 
 
#navPanel .indent-5 {
 
display: inline-block;
 
width: 5em;
 
}
 
 
#navPanel .depth-0 {
 
color: #fff;
 
}
 
 
body.navPanel-visible #page-wrapper {
 
-moz-transform: translateY(50vh);
 
-webkit-transform: translateY(50vh);
 
-ms-transform: translateY(50vh);
 
transform: translateY(50vh);
 
}
 
 
body.navPanel-visible #navButton {
 
-moz-transform: translateY(50vh);
 
-webkit-transform: translateY(50vh);
 
-ms-transform: translateY(50vh);
 
transform: translateY(50vh);
 
}
 
 
body.navPanel-visible #navPanel {
 
-moz-transform: translateY(0);
 
-webkit-transform: translateY(0);
 
-ms-transform: translateY(0);
 
transform: translateY(0);
 
}
 
 
/* Wrapper */
 
 
.wrapper {
 
padding: 3em 1em 3em 1em;
 
}
 
 
/* Header */
 
 
#header {
 
background-attachment: scroll;
 
padding: 2.5em 0 0 0;
 
}
 
 
#header .inner {
 
padding-top: 1.5em;
 
padding-left: 1em;
 
padding-right: 1em;
 
}
 
 
#header header > p {
 
font-size: 1em;
 
}
 
 
#header h1 {
 
font-size: 1.75em;
 
}
 
 
#header hr {
 
top: 1em;
 
margin-bottom: 2.5em;
 
}
 
 
body.homepage #header {
 
min-height: 0;
 
padding: 5.5em 0 5em 0;
 
height: auto;
 
}
 
 
body.homepage #header:before {
 
display: none;
 
}
 
 
body.homepage #header h1 {
 
font-size: 2.5em;
 
}
 
 
/* Nav */
 
 
#nav {
 
display: none;
 
}
 
 
/* Banner */
 
 
#banner {
 
padding: 3em 2em 3em 2em;
 
}
 
 
/* Sidebar */
 
 
#sidebar > hr:first-of-type {
 
display: block;
 
}
 
 
/* Main */
 
 
#main > header {
 
text-align: center;
 
}
 
 
/* Footer */
 
 
#footer {
 
padding-left: 1em;
 
padding-right: 1em;
 
}
 
 
/* Carousel */
 
 
.carousel {
 
padding: 0.5em 0 0.5em 0;
 
}
 
 
.carousel .reel {
 
padding: 0 0.5em 0 0.5em;
 
}
 
 
.carousel article {
 
width: 14em;
 
padding-bottom: 2em;
 
margin: 0 0.5em 0 0;
 
}
 
 
.carousel article .image {
 
margin-bottom: 2em;
 
}
 
  
}
+
</body>
 +
</html>

Latest revision as of 13:06, 19 January 2017


Harvard BioDesign 2016

Meet the Team!

Team Members

Mentors