Difference between revisions of "Team:Warwick"

 
(310 intermediate revisions by 4 users not shown)
Line 1: Line 1:
 +
 +
 
<html>
 
<html>
 +
 +
<style type="text/css">
 +
 +
 +
.firstHeading {
 +
display: none;
 +
}
 +
 +
 +
 +
 +
</style>
 +
 
<head>
 
<head>
 +
<div>
 +
 +
 +
 +
 +
 +
 
<style src = "" type = "text/css">
 
<style src = "" type = "text/css">
−
    /* links to the style sheets for bootstrap */
 
−
    <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
 
−
   
 
−
    <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css" type = "text/css">
 
  
  
Line 14: Line 32:
 
/* makes the white boxes go away */
 
/* makes the white boxes go away */
 
#content{
 
#content{
−
background: white;
+
background-image:url(https://static.igem.org/mediawiki/2015/d/d7/WarwickBg.jpg);
 
border: 0px;
 
border: 0px;
 
float: center;
 
float: center;
 
                                 width: 100%;
 
                                 width: 100%;
−
margin-left:auto;
+
−
                                margin-right:auto;
+
−
padding-top: 0px;
+
 
}
 
}
  
−
/* start styling */
 
  
−
.jumbotron {
+
−
  background-image:url('http://i.imgur.com/c8yonup.gif');
+
<meta charset="utf-8">
−
  height: 600px;
+
<meta name="viewport" content="width=device-width, initial-scale=1">
−
  background-repeat: no-repeat;
+
−
  background-size: cover;
+
−
  margin-top: 15px;
+
−
}
+
  
−
.jumbotron .container {
+
</style>
−
  position: relative;
+
−
  top:220px;
+
−
}
+
  
−
.jumbotron .container .title {
 
−
  color: #fff;
 
−
  font-size: 100px; 
 
−
  font-family: Georgia, serif;
 
−
  font-weight: bold;
 
−
  text-align: center;
 
−
}
 
  
−
.jumbotron p {
+
<style>
−
  font-size: 50px;
+
−
  color: #fff;
+
−
  text-align: center;
+
−
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
+
−
}
+
  
−
.jumbotron a {
+
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 {
−
  text-decoration: none;
+
margin: 0;
−
  background-color: #c5c51b;
+
padding: 0;
−
  font-size: 25px;
+
border: 0;
−
  color: #fff;
+
font-size: 100%;
−
  padding: 10px 15px 10px 15px;
+
−
}
+
vertical-align: baseline;
 +
}
  
−
.jumbotron a:hover {
+
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
−
  background-color: #fcf95a;
+
display: block;
−
}
+
}
  
−
.container {
+
body {
−
  text-align: center;
+
line-height: 1;
−
}
+
}
  
 +
ol, ul {
 +
list-style: none;
 +
}
  
−
.row {
+
blockquote, q {
−
    margin-left: 15px;
+
quotes: none;
−
    margin-right: 15px;
+
}
−
}
+
  
−
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
+
blockquote:before, blockquote:after, q:before, q:after {
−
    position: relative;
+
content: '';
−
    min-height: 1px;
+
content: none;
−
    padding-left: 10px;
+
}
−
    padding-right: 10px;
+
−
    margin: 10px;
+
−
}
+
  
 +
table {
 +
border-collapse: collapse;
 +
border-spacing: 0;
 +
}
  
−
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
+
body {
−
    float: left;
+
-webkit-text-size-adjust: none;
−
}
+
}
  
−
.col-md-4 {
+
/* Box Model */
−
    width: 30%;
+
−
    background: url("https://s-media-cache-ak0.pinimg.com/originals/d4/5d/52/d45d52604ab4b262e0add13a226c8f75.jpg");
+
−
}
+
  
 +
, *:before, *:after {
 +
-moz-box-sizing: border-box;
 +
-webkit-box-sizing: border-box;
 +
box-sizing: border-box;
 +
}
  
 +
/* Containers */
  
 +
.container {
 +
margin-left: auto;
 +
margin-right: auto;
 +
}
  
 +
.container.\31 25\25 {
 +
width: 100%;
 +
max-width: 1450px;
 +
min-width: 1140px;
 +
}
  
−
.learn-more {
+
.container.\37 5\25 {
−
    background-color: #fff;
+
width: 855px;
−
}
+
}
  
−
.learn-more h3 {
+
.container.\35 0\25 {
−
  font-family: 'Shift', sans-serif;
+
width: 570px;
−
  font-size: 25px;
+
}
−
  font-weight: bold;
+
−
  color: #c5c51b;
+
−
}
+
  
−
.learn-more p {
+
.container.\32 5\25 {
−
  color: #787878; /* gray */
+
width: 285px;
−
  font-weight: bold;
+
}
−
}
+
  
−
.learn-more a {
+
.container {
−
  color: #00b0ff;
+
width: 1140px;
−
}
+
}
  
−
</style>
+
@media screen and (max-width: 1680px) {
−
</head>
+
  
−
<body>
+
.container.\31 25\25 {
−
    <div class="jumbotron">
+
width: 100%;
−
      <div class="container">
+
max-width: 1200px;
−
        <div class = "title">Under Construction.</div>
+
min-width: 960px;
−
        <p>Warwick iGEM</p>
+
}
−
        <a href="https://twitter.com/iGEMW" class="twitter-follow-button" data-show-count="true" data-size="large">Follow @iGEMW</a>
+
−
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
+
−
      </div>
+
−
    </div>
+
−
+
−
<body>
+
−
<div class="highlightBox">
+
−
<h4> Our Project </h4>
+
−
<p>Our team's aim is to create a tool box allowing the selective allocation of specific cell types to an engineered DNA scaffold, using zinc finger binding proteins on an E. coli model. Our research would allow for the self assembly of complex multi-type cell structures. The project will advance in progressive bands of complexity: designing and cloning the zinc finger coated E. coli cells, constructing DNA structure to allow for the cells to bind, further development of the zinc finger binding proteins allowing for multiple cell types to coexist on the DNA structure, and finally designing complex 3-D structures that the cells will be able to self assemble into. This has possible applications throughout medicine. Our research would contribute potentially to 3-D printing organic tissues, allowing for customised living tissues to be engineered.</p>
+
−
</div>
+
−
</div>
+
  
−
</body>
+
.container.\37 5\25 {
 +
width: 720px;
 +
}
  
 +
.container.\35 0\25 {
 +
width: 480px;
 +
}
  
−
</div></div>
+
.container.\32 5\25 {
 +
width: 240px;
 +
}
  
−
<!--These are the closing tags for div id="mainContainer" and div id="contentContainer". The corresponding opening tags appear in the template that is {{included}} at the top of this page.-->
+
.container {
 +
width: 960px;
 +
}
  
 +
}
 +
 +
@media screen and (max-width: 1080px) {
 +
 +
.container.\31 25\25 {
 +
width: 100%;
 +
max-width: 118.75%;
 +
min-width: 95%;
 +
}
 +
 +
.container.\37 5\25 {
 +
width: 71.25%;
 +
}
 +
 +
.container.\35 0\25 {
 +
width: 47.5%;
 +
}
 +
 +
.container.\32 5\25 {
 +
width: 23.75%;
 +
}
 +
 +
.container {
 +
width: 95%;
 +
}
 +
 +
}
 +
 +
@media screen and (max-width: 840px) {
 +
 +
.container.\31 25\25 {
 +
width: 100%;
 +
max-width: 118.75%;
 +
min-width: 95%;
 +
}
 +
 +
.container.\37 5\25 {
 +
width: 71.25%;
 +
}
 +
 +
.container.\35 0\25 {
 +
width: 47.5%;
 +
}
 +
 +
.container.\32 5\25 {
 +
width: 23.75%;
 +
}
 +
 +
.container {
 +
width: 95%;
 +
}
 +
 +
}
 +
 +
@media screen and (max-width: 736px) {
 +
 +
.container.\31 25\25 {
 +
width: 100%;
 +
max-width: 118.75%;
 +
min-width: 95%;
 +
}
 +
 +
.container.\37 5\25 {
 +
width: 71.25%;
 +
}
 +
 +
.container.\35 0\25 {
 +
width: 47.5%;
 +
}
 +
 +
.container.\32 5\25 {
 +
width: 23.75%;
 +
}
 +
 +
.container {
 +
width: 95% !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: 20;
 +
}
 +
 +
.row.uniform > * > :last-child {
 +
margin-bottom: 20;
 +
}
 +
 +
.row.\30 \25 > * {
 +
padding: 20px 20 20 20px;
 +
}
 +
 +
.row.\30 \25 {
 +
margin: 0px 0 -1px 0px;
 +
}
 +
 +
.row.uniform.\30 \25 > * {
 +
padding: 50px 50 50 50px;
 +
}
 +
 +
.row.uniform.\30 \25 {
 +
margin: 0px 0 -1px 0px;
 +
}
 +
 +
.row > * {
 +
padding: 80px 80 80 80px;
 +
}
 +
 +
.row {
 +
margin: -40px 0 -1px -40px;
 +
}
 +
 +
.row.uniform > * {
 +
padding: 80px 80 80 80px;
 +
}
 +
 +
.row.uniform {
 +
margin: -40px 0 -1px -40px;
 +
}
 +
 +
.row.\32 00\25 > * {
 +
padding: 80px 0 0 80px;
 +
}
 +
 +
.row.\32 00\25 {
 +
margin: -80px 0 -1px -80px;
 +
}
 +
 +
.row.uniform.\32 00\25 > * {
 +
padding: 80px 0 0 80px;
 +
}
 +
 +
.row.uniform.\32 00\25 {
 +
margin: -80px 0 -1px -80px;
 +
}
 +
 +
.row.\31 50\25 > * {
 +
padding: 60px 0 0 60px;
 +
}
 +
 +
.row.\31 50\25 {
 +
margin: -60px 0 -1px -60px;
 +
}
 +
 +
.row.uniform.\31 50\25 > * {
 +
padding: 60px 0 0 60px;
 +
}
 +
 +
.row.uniform.\31 50\25 {
 +
margin: -60px 0 -1px -60px;
 +
}
 +
 +
.row.\35 0\25 > * {
 +
padding: 20px 0 0 20px;
 +
}
 +
 +
.row.\35 0\25 {
 +
margin: -20px 0 -1px -20px;
 +
}
 +
 +
.row.uniform.\35 0\25 > * {
 +
padding: 20px 0 0 20px;
 +
}
 +
 +
.row.uniform.\35 0\25 {
 +
margin: -20px 0 -1px -20px;
 +
}
 +
 +
.row.\32 5\25 > * {
 +
padding: 10px 0 0 10px;
 +
}
 +
 +
.row.\32 5\25 {
 +
margin: -10px 0 -1px -10px;
 +
}
 +
 +
.row.uniform.\32 5\25 > * {
 +
padding: 10px 0 0 10px;
 +
}
 +
 +
.row.uniform.\32 5\25 {
 +
margin: -10px 0 -1px -10px;
 +
}
 +
 +
.\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: 40px 0 0 40px;
 +
}
 +
 +
.row {
 +
margin: -40px 0 -1px -40px;
 +
}
 +
 +
.row.uniform > * {
 +
padding: 40px 0 0 40px;
 +
}
 +
 +
.row.uniform {
 +
margin: -40px 0 -1px -40px;
 +
}
 +
 +
.row.\32 00\25 > * {
 +
padding: 80px 0 0 80px;
 +
}
 +
 +
.row.\32 00\25 {
 +
margin: -80px 0 -1px -80px;
 +
}
 +
 +
.row.uniform.\32 00\25 > * {
 +
padding: 80px 0 0 80px;
 +
}
 +
 +
.row.uniform.\32 00\25 {
 +
margin: -80px 0 -1px -80px;
 +
}
 +
 +
.row.\31 50\25 > * {
 +
padding: 60px 0 0 60px;
 +
}
 +
 +
.row.\31 50\25 {
 +
margin: -60px 0 -1px -60px;
 +
}
 +
 +
.row.uniform.\31 50\25 > * {
 +
padding: 60px 0 0 60px;
 +
}
 +
 +
.row.uniform.\31 50\25 {
 +
margin: -60px 0 -1px -60px;
 +
}
 +
 +
.row.\35 0\25 > * {
 +
padding: 20px 0 0 20px;
 +
}
 +
 +
.row.\35 0\25 {
 +
margin: -20px 0 -1px -20px;
 +
}
 +
 +
.row.uniform.\35 0\25 > * {
 +
padding: 20px 0 0 20px;
 +
}
 +
 +
.row.uniform.\35 0\25 {
 +
margin: -20px 0 -1px -20px;
 +
}
 +
 +
.row.\32 5\25 > * {
 +
padding: 10px 0 0 10px;
 +
}
 +
 +
.row.\32 5\25 {
 +
margin: -10px 0 -1px -10px;
 +
}
 +
 +
.row.uniform.\32 5\25 > * {
 +
padding: 10px 0 0 10px;
 +
}
 +
 +
.row.uniform.\32 5\25 {
 +
margin: -10px 0 -1px -10px;
 +
}
 +
 +
.\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: 1080px) {
 +
 +
.row > * {
 +
padding: 40px 0 0 40px;
 +
}
 +
 +
.row {
 +
margin: -40px 0 -1px -40px;
 +
}
 +
 +
.row.uniform > * {
 +
padding: 40px 0 0 40px;
 +
}
 +
 +
.row.uniform {
 +
margin: -40px 0 -1px -40px;
 +
}
 +
 +
.row.\32 00\25 > * {
 +
padding: 80px 0 0 80px;
 +
}
 +
 +
.row.\32 00\25 {
 +
margin: -80px 0 -1px -80px;
 +
}
 +
 +
.row.uniform.\32 00\25 > * {
 +
padding: 80px 0 0 80px;
 +
}
 +
 +
.row.uniform.\32 00\25 {
 +
margin: -80px 0 -1px -80px;
 +
}
 +
 +
.row.\31 50\25 > * {
 +
padding: 60px 0 0 60px;
 +
}
 +
 +
.row.\31 50\25 {
 +
margin: -60px 0 -1px -60px;
 +
}
 +
 +
.row.uniform.\31 50\25 > * {
 +
padding: 60px 0 0 60px;
 +
}
 +
 +
.row.uniform.\31 50\25 {
 +
margin: -60px 0 -1px -60px;
 +
}
 +
 +
.row.\35 0\25 > * {
 +
padding: 20px 0 0 20px;
 +
}
 +
 +
.row.\35 0\25 {
 +
margin: -20px 0 -1px -20px;
 +
}
 +
 +
.row.uniform.\35 0\25 > * {
 +
padding: 20px 0 0 20px;
 +
}
 +
 +
.row.uniform.\35 0\25 {
 +
margin: -20px 0 -1px -20px;
 +
}
 +
 +
.row.\32 5\25 > * {
 +
padding: 10px 0 0 10px;
 +
}
 +
 +
.row.\32 5\25 {
 +
margin: -10px 0 -1px -10px;
 +
}
 +
 +
.row.uniform.\32 5\25 > * {
 +
padding: 10px 0 0 10px;
 +
}
 +
 +
.row.uniform.\32 5\25 {
 +
margin: -10px 0 -1px -10px;
 +
}
 +
 +
.\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: 840px) {
 +
 +
.row > * {
 +
padding: 30px 0 0 30px;
 +
}
 +
 +
.row {
 +
margin: -30px 0 -1px -30px;
 +
}
 +
 +
.row.uniform > * {
 +
padding: 30px 0 0 30px;
 +
}
 +
 +
.row.uniform {
 +
margin: -30px 0 -1px -30px;
 +
}
 +
 +
.row.\32 00\25 > * {
 +
padding: 60px 0 0 60px;
 +
}
 +
 +
.row.\32 00\25 {
 +
margin: -60px 0 -1px -60px;
 +
}
 +
 +
.row.uniform.\32 00\25 > * {
 +
padding: 60px 0 0 60px;
 +
}
 +
 +
.row.uniform.\32 00\25 {
 +
margin: -60px 0 -1px -60px;
 +
}
 +
 +
.row.\31 50\25 > * {
 +
padding: 45px 0 0 45px;
 +
}
 +
 +
.row.\31 50\25 {
 +
margin: -45px 0 -1px -45px;
 +
}
 +
 +
.row.uniform.\31 50\25 > * {
 +
padding: 45px 0 0 45px;
 +
}
 +
 +
.row.uniform.\31 50\25 {
 +
margin: -45px 0 -1px -45px;
 +
}
 +
 +
.row.\35 0\25 > * {
 +
padding: 15px 0 0 15px;
 +
}
 +
 +
.row.\35 0\25 {
 +
margin: -15px 0 -1px -15px;
 +
}
 +
 +
.row.uniform.\35 0\25 > * {
 +
padding: 15px 0 0 15px;
 +
}
 +
 +
.row.uniform.\35 0\25 {
 +
margin: -15px 0 -1px -15px;
 +
}
 +
 +
.row.\32 5\25 > * {
 +
padding: 7.5px 0 0 7.5px;
 +
}
 +
 +
.row.\32 5\25 {
 +
margin: -7.5px 0 -1px -7.5px;
 +
}
 +
 +
.row.uniform.\32 5\25 > * {
 +
padding: 7.5px 0 0 7.5px;
 +
}
 +
 +
.row.uniform.\32 5\25 {
 +
margin: -7.5px 0 -1px -7.5px;
 +
}
 +
 +
.\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: 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.is-scroll {
 +
background-attachment: scroll, scroll;
 +
background-size: auto, 100% auto;
 +
}
 +
 +
 +
 +
h1, h2, h3, h4, h5, h6 {
 +
 +
text-transform: uppercase;
 +
 +
}
 +
 +
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
 +
color: inherit;
 +
text-decoration: none;
 +
}
 +
 +
h2 {
 +
font-size: 1.25em;
 +
letter-spacing: 8px;
 +
}
 +
 +
h3 {
 +
font-size: 1em;
 +
letter-spacing: 5px;
 +
}
 +
 +
strong, b {
 +
 +
}
 +
 +
em, i {
 +
font-style: italic;
 +
}
 +
 +
 +
 +
 +
 +
 +
 +
/* Image */
 +
 +
.image {
 +
display: inline-block;
 +
border: 0;
 +
}
 +
 +
.image img {
 +
display: block;
 +
width: 100%;
 +
}
 +
 +
.image.featured {
 +
display: block;
 +
width: 100%;
 +
margin: 0 0 2em 0;
 +
}
 +
 +
.image.fit {
 +
display: block;
 +
width: 100%;
 +
}
 +
 +
.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;
 +
}
 +
 +
 +
/* Form */
 +
 +
form label {
 +
display: block;
 +
margin: 0 0 0.5em 0;
 +
}
 +
 +
form input[type="text"],
 +
form input[type="email"],
 +
form input[type="password"],
 +
form select,
 +
form textarea {
 +
-moz-transition: background-color 0.35s ease-in-out;
 +
-webkit-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-appearance: none;
 +
display: block;
 +
border: 0;
 +
background: #f1f1f1;
 +
width: 100%;
 +
padding: 0.75em;
 +
}
 +
 +
form input[type="text"]:focus,
 +
form input[type="email"]:focus,
 +
form input[type="password"]:focus,
 +
form select:focus,
 +
form textarea:focus {
 +
background: #f8f8f8;
 +
}
 +
 +
form input[type="text"],
 +
form input[type="email"],
 +
form input[type="password"],
 +
form select {
 +
line-height: 1em;
 +
}
 +
 +
form textarea {
 +
min-height: 12em;
 +
}
 +
 +
form .formerize-placeholder {
 +
color: #5a5959 !important;
 +
}
 +
 +
form ::-webkit-input-placeholder {
 +
color: #5a5959 !important;
 +
}
 +
 +
form :-moz-placeholder {
 +
color: #5a5959 !important;
 +
}
 +
 +
form ::-moz-placeholder {
 +
color: #5a5959 !important;
 +
}
 +
 +
form :-ms-input-placeholder {
 +
color: #5a5959 !important;
 +
}
 +
 +
form ::-moz-focus-inner {
 +
border: 0;
 +
}
 +
 +
form ul.actions {
 +
margin-bottom: 0;
 +
text-align: center;
 +
}
 +
 +
 +
 +
/* Button */
 +
 +
input[type="button"],
 +
input[type="submit"],
 +
input[type="reset"],
 +
button,
 +
.button {
 +
-moz-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out;
 +
-webkit-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out;
 +
-ms-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out;
 +
transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out;
 +
-webkit-appearance: none;
 +
position: relative;
 +
display: inline-block;
 +
border: 0;
 +
background: #35b88f;
 +
color: #fff;
 +
text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25);
 +
cursor: pointer;
 +
text-decoration: none;
 +
outline: 0;
 +
padding: 1em 3em 1em 3em;
 +
text-align: center;
 +
border-radius: 3em;
 +
 +
}
 +
 +
input[type="button"]:hover,
 +
input[type="submit"]:hover,
 +
input[type="reset"]:hover,
 +
button:hover,
 +
.button:hover {
 +
background: #45c89f;
 +
}
 +
 +
input[type="button"].style2,
 +
input[type="submit"].style2,
 +
input[type="reset"].style2,
 +
button.style2,
 +
.button.style2 {
 +
color: #3a3939;
 +
background: #fff;
 +
box-shadow: inset 0 0 0 1px #fff;
 +
}
 +
 +
input[type="button"].style2:hover,
 +
input[type="submit"].style2:hover,
 +
input[type="reset"].style2:hover,
 +
button.style2:hover,
 +
.button.style2:hover {
 +
background: rgba(255, 255, 255, 0.1);
 +
color: #fff !important;
 +
text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25) !important;
 +
}
 +
 +
input[type="button"].style3,
 +
input[type="submit"].style3,
 +
input[type="reset"].style3,
 +
button.style3,
 +
.button.style3 {
 +
background: none;
 +
color: #3a3939;
 +
box-shadow: inset 0 0 0 1px #dad9d9;
 +
}
 +
 +
input[type="button"].style3:hover,
 +
input[type="submit"].style3:hover,
 +
input[type="reset"].style3:hover,
 +
button.style3:hover,
 +
.button.style3:hover {
 +
background: rgba(58, 57, 57, 0.025);
 +
}
 +
 +
/* Box */
 +
 +
.box {
 +
position: relative;
 +
margin-top: 9em;
 +
margin-bottom: 0;
 +
}
 +
 +
.box:after {
 +
content: '';
 +
display: block;
 +
position: absolute;
 +
top: -9em;
 +
left: 50%;
 +
height: 9em;
 +
border-left: solid 1px #fff;
 +
}
 +
 +
.box:before {
 +
content: '';
 +
display: block;
 +
width: 90px;
 +
height: 66px;
 +
position: absolute;
 +
left: 50%;
 +
top: -4.5em;
 +
margin-left: -45px;
 +
margin-top: -33px;
 +
background: url("images/arrow.svg") no-repeat;
 +
}
 +
 +
.box :last-child {
 +
margin-bottom: 0;
 +
}
 +
 +
.box.style1 {
 +
background: #fff;
 +
padding: 3em;
 +
}
 +
 +
.box.style1 .image {
 +
display: block;
 +
position: absolute;
 +
top: 0;
 +
width: 50%;
 +
height: 100%;
 +
background: #152E33;
 +
overflow: hidden;
 +
}
 +
 +
.box.style1 .image img {
 +
position: absolute;
 +
top: 0;
 +
height: 100%;
 +
width: auto;
 +
}
 +
 +
.box.style1 .inner > :last-child {
 +
margin: 0;
 +
}
 +
 +
.box.style1.right .image {
 +
left: 0;
 +
}
 +
 +
.box.style1.right .image img {
 +
right: 0;
 +
}
 +
 +
.box.style1.right .inner {
 +
margin-left: 50%;
 +
padding-left: 3em;
 +
}
 +
 +
.box.style1.left .image {
 +
right: 0;
 +
}
 +
 +
.box.style1.left .image img {
 +
left: 0;
 +
}
 +
 +
.box.style1.left .inner {
 +
margin-right: 50%;
 +
padding-right: 3em;
 +
}
 +
 +
.box.style2 {
 +
text-align: center;
 +
}
 +
 +
.box.style2 header {
 +
display: inline-block;
 +
background: #fff;
 +
padding: 2em 3em 2em 3em;
 +
margin: 0;
 +
}
 +
 +
.box.style2 header p {
 +
padding: 0;
 +
}
 +
 +
.box.style2 .inner {
 +
position: relative;
 +
padding: 40px 0 0px 0;
 +
}
 +
 +
.box.style2 .inner:after {
 +
content: '';
 +
display: block;
 +
position: absolute;
 +
top: 0;
 +
left: 50%;
 +
height: 100%;
 +
border-left: solid 1px #fff;
 +
}
 +
 +
.box.style2 .inner .row {
 +
position: relative;
 +
}
 +
 +
.box.style2 .inner .row:before {
 +
content: '';
 +
display: block;
 +
position: absolute;
 +
top: 50%;
 +
left: 20px;
 +
width: calc(100% - 40px);
 +
border-bottom: solid 1px #fff;
 +
}
 +
 +
.box.style2 .inner .image {
 +
position: relative;
 +
z-index: 1;
 +
padding: 20px;
 +
}
 +
 +
.box.style3 {
 +
background: #fff;
 +
padding: 3em;
 +
}
 +
 +
.box.style3 header {
 +
text-align: center;
 +
}
 +
 +
 +
/* Header */
 +
 +
#header {
 +
position: relative;
 +
color: #fff;
 +
text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25);
 +
text-align: center;
 +
margin: 0;
 +
padding: 14em 0 14em 0;
 +
cursor: default;
 +
}
 +
 +
#header header {
 +
display: inline-block;
 +
padding: 0 0 4.5em 0;
 +
}
 +
 +
#header header h1 {
 +
font-size: 2em;
 +
letter-spacing: 10px;
 +
}
 +
 +
#header header p {
 +
border-top: solid 1px rgba(255, 255, 255, 0.5);
 +
color: rgba(255, 255, 255, 0.75);
 +
text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.1875);
 +
font-size: 1em;
 +
text-transform: uppercase;
 +
letter-spacing: 3px;
 +
padding: 0;
 +
margin-top: 0.35em;
 +
}
 +
 +
 +
 +
 +
 +
 +
 +
/* Banner */
 +
 +
#banner {
 +
position: relative;
 +
color: #fff;
 +
text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25);
 +
text-align: center;
 +
background: #35b88f url("images/banner.svg") bottom center no-repeat;
 +
padding: 5em 0 5em 0;
 +
margin: 0;
 +
background-size: 125% auto;
 +
}
 +
 +
#banner .button {
 +
color: #35b882;
 +
text-shadow: 0 0 0.5px rgba(53, 184, 130, 0.25);
 +
}
 +
 +
#banner header {
 +
margin: 0 0 2em 0;
 +
}
 +
 +
#banner header h2 {
 +
font-size: 1.75em;
 +
letter-spacing: 8px;
 +
}
 +
 +
#banner p {
 +
margin: 0;
 +
}
 +
 +
#banner footer {
 +
margin: 2em 0 0 0;
 +
}
 +
 +
#banner a {
 +
color: inherit;
 +
border-bottom-color: rgba(255, 255, 255, 0.5);
 +
}
 +
 +
#banner a:hover {
 +
border-bottom-color: rgba(255, 255, 255, 0);
 +
}
 +
 +
 +
 +
 +
 +
 +
 +
/* Narrow */
 +
 +
@media screen and (max-width: 840px) {
 +
 +
/* Basic */
 +
 +
body {
 +
background-color: #203936;
 +
background-size: auto, 100% auto;
 +
background-position: top left, top center;
 +
background-attachment: scroll, scroll;
 +
}
 +
 +
input, textarea, select {
 +
font-size: 14pt;
 +
}
 +
 +
h1, h2, h3, h4, h5, h6 {
 +
line-height: 1.5em;
 +
}
 +
 +
 +
/* Box */
 +
 +
.box {
 +
position: relative;
 +
}
 +
 +
.box section {
 +
margin: 0 0 2em 0;
 +
}
 +
 +
.box.style1 {
 +
padding: 2.5em 2em 2.5em 2em;
 +
}
 +
 +
.box.style1.right .inner {
 +
padding-left: 2em;
 +
}
 +
 +
.box.style1.left .inner {
 +
padding-right: 2em;
 +
}
 +
 +
.box.style2 header {
 +
padding: 2em;
 +
}
 +
 +
.box.style2 .inner {
 +
position: relative;
 +
padding: 30px 0 0 0;
 +
}
 +
 +
.box.style3 {
 +
padding: 2.5em 2em 2.5em 2em;
 +
}
 +
 +
/* Banner */
 +
 +
#banner {
 +
padding: 3.5em;
 +
background-size: 200% auto;
 +
}
 +
 +
#banner br {
 +
display: none;
 +
}
 +
 +
}
 +
 +
/* Mobile */
 +
 +
@media screen and (max-width: 736px) {
 +
 +
/* Basic */
 +
 +
* {
 +
text-shadow: none !important;
 +
}
 +
 +
body, input, textarea, select {
 +
line-height: 1.5em;
 +
font-size: 12pt;
 +
letter-spacing: 0;
 +
}
 +
 +
h2, h3, h4, h5, h6 {
 +
font-size: 1em;
 +
}
 +
 +
h2 {
 +
font-size: 1.25em;
 +
letter-spacing: 4px;
 +
}
 +
 +
 +
/* Button */
 +
 +
input[type="button"],
 +
input[type="submit"],
 +
input[type="reset"],
 +
button,
 +
.button {
 +
padding: 0.75em 0 0.75em 0;
 +
width: 100%;
 +
max-width: 320px;
 +
}
 +
 +
/* Box */
 +
 +
.box {
 +
margin-top: 4.5em;
 +
}
 +
 +
.box:after {
 +
top: -4.5em;
 +
height: 4.5em;
 +
}
 +
 +
.box:before {
 +
width: 45px;
 +
height: 33px;
 +
top: -2.25em;
 +
margin-left: -22.5px;
 +
margin-top: -16.5px;
 +
background-size: 45px 33px;
 +
}
 +
 +
.box.style1 {
 +
padding: 0;
 +
text-align: center;
 +
}
 +
 +
.box.style1 .image {
 +
position: relative !important;
 +
left: 0 !important;
 +
width: 100% !important;
 +
height: auto !important;
 +
}
 +
 +
.box.style1 .image img {
 +
position: relative;
 +
height: auto;
 +
width: 100%;
 +
}
 +
 +
.box.style1 .inner {
 +
margin: 0 !important;
 +
padding: 2em 1.25em 2em 1.25em !important;
 +
}
 +
 +
.box.style2 .inner .row:before {
 +
display: none;
 +
}
 +
 +
.box.style2 .inner .image {
 +
padding: 0;
 +
max-width: 250px;
 +
margin: 0 auto 20px auto;
 +
}
 +
 +
.box.style3 {
 +
padding: 2em 1.25em 2em 1.25em;
 +
}
 +
 +
/* Header */
 +
 +
#header {
 +
padding: 6em 0 6em 0;
 +
}
 +
 +
#header header {
 +
padding-left: 2em;
 +
padding-right: 2em;
 +
}
 +
 +
#header header h1 {
 +
font-size: 1.75em;
 +
letter-spacing: 6px;
 +
}
 +
 +
#header footer {
 +
bottom: 4.5em;
 +
padding: 0 2em 0 2em;
 +
}
 +
 +
#header footer:after {
 +
bottom: -4.5em;
 +
left: 50%;
 +
height: 4.5em;
 +
}
 +
 +
#header footer:before {
 +
width: 45px;
 +
height: 33px;
 +
bottom: -2.25em;
 +
margin-left: -22.5px;
 +
margin-bottom: -16.5px;
 +
background-size: 45px 33px;
 +
}
 +
 +
/* Banner */
 +
 +
#banner {
 +
padding: 3em 2em 3em 2em;
 +
background-size: auto 150%;
 +
}
 +
 +
#banner header {
 +
margin: 0 0 1em 0;
 +
}
 +
 +
#banner header h2 {
 +
font-size: 1.5em;
 +
letter-spacing: 6px;
 +
}
 +
 +
 +
 +
}</style>
 +
 +
 +
 +
 +
<!--[if lte IE 8]><style>
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
#header header p {
 +
border-top: solid 1px #888;
 +
}</style><![endif]-->
 +
</head>
 +
<body>
 +
 +
<!-- Header -->
 +
<section id="header" style="padding: 188px 0px;">
 +
<header>
 +
<h1 style="padding-top: 5px">Warwick iGEM 2015</h1>
 +
<p>Brixells</p>
 +
<br>
 +
<br>
 +
<br>
 +
<br>
 +
<br>
 +
<br>
 +
<br>
 +
<br>
 +
<br>
 +
 +
</header>
 +
<footer><b></b><a href="#home" class="btn btn-default" id="menu-toggle">Skip to Home</a></p>
 +
 +
 +
 +
<a class="button style2 scrolly-middle" href="#banner">Learn about Cell LEGO</a>
 +
 +
 +
</footer><p style="float: right;"><img src="https://static.igem.org/mediawiki/2015/3/3c/WarwickLogoforhome.png" height="200px" width="300px" border="100px"></p>
 +
 +
</section>
 +
 +
<!-- Banner -->
 +
<section id="banner">
 +
 +
<header>
 +
<h2>Brixells<br><br> biological building blocks</h2>
 +
</header>
 +
<p>DNA programmed assembly of cells:
 +
<br>We are inventing a novel method of producing microscopic cell-cell binding
 +
<br>using intracellular proteins modified to express on the surface of the cell
 +
<br>The applications are endless: medicine, micro- and synthetic biology research,
 +
<br>synthetic organs, insight into multicellularity, meta-material production,
 +
<br> whatever you can imagine.
 +
<br>
 +
<br><img src="https://static.igem.org/mediawiki/2015/f/ff/Warwick_homepage_diagram.jpeg">
 +
<br>
 +
<br>
 +
<br></p>
 +
<footer>
 +
<a class="button style2 scrolly" href="#first">Continue Reading</a>
 +
<br>
 +
<br>
 +
<br>
 +
<br>
 +
<br>
 +
<br>
 +
</footer>
 +
</section>
 +
 +
<!-- Feature 1 -->
 +
<section id="first">
 +
 +
 +
 +
<!-- Feature 2 -->
 +
<article class="container box style1 left" id="scrollproject">
 +
<a class="image fit" href="https://2015.igem.org/Team:Warwick/Parts"><img alt="" src="https://static.igem.org/mediawiki/2015/5/59/Parts_picture.jpg"></a>
 +
<div class="inner">
 +
<header>
 +
<h2>Our Submitted Parts<br>
 +
...the Brixell Collection</h2>
 +
</header><br>
 +
 +
 +
<p>Click on the image to the right to see what parts we submitted for the competition or continue scrolling.<br><br><p style="float: middle;"><img src="https://static.igem.org/mediawiki/2015/2/26/Warwickarrow.jpeg" height="100px" width="300px" border="1px"></p></p>
 +
</div>
 +
</article>
 +
<br><br><br><br>
 +
<br>
 +
<br><br>
 +
<br>
 +
<br>
 +
<div style="text-align: center;"><a class="button style2 scrolly" href="#home">Continue Reading</a></div>
 +
 +
<!-- Portfolio -->
 +
<section id="home">
 +
<article class="container box style2">
 +
<header>
 +
<h2>Our Project</h2>
 +
<p>Click on the images below to explore our different sections.</p>
 +
</header>
 +
<div class="inner gallery">
 +
<div class="row 0%">
 +
<div class="3u 12u(mobile)"><a class="image fit" style="outline: 0px;" href="https://2015.igem.org/Team:Warwick/Project"><img title="Project Summary" alt="" src="https://static.igem.org/mediawiki/2015/f/fc/Imaege.png"  height="190" width="150"></a></div>
 +
<div class="3u 12u(mobile)"><a class="image fit" style="outline: 0px;" href="https://2015.igem.org/Team:Warwick/Protocols"><img title="Experiments" alt="" src="https://static.igem.org/mediawiki/2015/f/f4/Warwick.png"  height="190" width="150"></a></div>
 +
<div class="3u 12u(mobile)"><a class="image fit" style="outline: 0px;" href="https://2015.igem.org/Team:Warwick/Results"><img title="Results" alt="" src="https://static.igem.org/mediawiki/2015/a/a1/Homepage.png"height="190" width="150"></a></div>
 +
<div class="3u 12u(mobile)"><a class="image fit" style="outline: 0px;" href="https://2015.igem.org/Team:Warwick/Parts"><img title="Submitted Parts" alt="" src="https://static.igem.org/mediawiki/2015/5/5b/PartsWarwickHomepage.png"  height="190" width="150"></a></div>
 +
</div>
 +
<div class="row 0%">
 +
<div class="3u 12u(mobile)"><a class="image fit" style="outline: 0px;" href="https://2015.igem.org/Team:Warwick/Modeling"><img title="Modelling" alt="" src="https://static.igem.org/mediawiki/2015/7/75/Modellinghomepageimagewarwick.png"  height="190" width="150"></a></div>
 +
<div class="3u 12u(mobile)"><a class="image fit" style="outline: 0px; " href="http//:2015.igem.org/Team:Warwick/Practices"><img title="Outreach" alt="" src="https://static.igem.org/mediawiki/2015/d/dd/Outreachhomepagewarwick.png"    height="190" width="150"></a></div>
 +
<div class="3u 12u(mobile)"><a class="image fit" style="outline: 0px;" href="https://2015.igem.org/Team:Warwick/Collaborations"><img title="Collaborations" alt="" src="https://static.igem.org/mediawiki/2015/f/fb/Homepagewarwick.png"    height="190" width="150"></a></div>
 +
<div class="3u 12u(mobile)"><a class="image fit" style="outline: 0px;" href="https://2015.igem.org/Team:Warwick/Attributions"><img title="Team" alt="Team" src="https://static.igem.org/mediawiki/2015/f/fc/WarwickiGEM2015TeamPicture.jpeg"    height="190" width="150"></a></div><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 +
</div>
 +
</div>
 +
</article>
 +
 +
<!-- Contact -->
 +
<article class="container box style3">
 +
<header>
 +
<h2>Please Contact Us</h2>
 +
<p>We will respond as quickly as possible.</p>
 +
</header>
 +
<form action="#" method="post">
 +
<div class="row 50%">
 +
<div class="6u 12u$(mobile)"><input name="name" class="text" type="text" placeholder="Name"></div>
 +
<div class="6u$ 12u$(mobile)"><input name="email" class="text" type="text" placeholder="Email"></div>
 +
<div class="12u$">
 +
<textarea name="message" placeholder="Message">Message</textarea>
 +
</div>
 +
<div class="12u$">
 +
<ul class="actions">
 +
<li><input type="submit" value="Send Message"></li>
 +
</ul>
 +
</div>
 +
</div>
 +
</form>
 +
</article>
 +
 +
 +
</table>
 +
</div>
 +
</section>
 +
<section>
 +
 +
 +
</ul>
 +
</div>
 +
</div>
 +
</form>
 +
</section>
 +
</article>
 +
 +
 +
 +
 +
 +
</div>
 +
</section>
 +
 +
 +
 +
 +
 +
<script>$(document).ready(function(){
 +
$('a[href^="#"]').on('click',function (e) {
 +
    e.preventDefault();
 +
 +
    var target = this.hash;
 +
    var $target = $(target);
 +
 +
    $('html, body').stop().animate({
 +
        'scrollTop': $target.offset().top
 +
    }, 900, 'swing', function () {
 +
        window.location.hash = target;
 +
    });
 +
});
 +
});</script>
 +
 +
 +
 +
 +
 +
 +
</div></div></body>
 +
</div>
 
</html>
 
</html>

Latest revision as of 18:18, 18 September 2015


Our Submitted Parts
...the Brixell Collection


Click on the image to the right to see what parts we submitted for the competition or continue scrolling.










Our Project

Click on the images below to explore our different sections.

Team














Please Contact Us

We will respond as quickly as possible.