Difference between revisions of "Team:EPF Lausanne"

Line 1: Line 1:
−
<!--DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">-->
+
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800);
−
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
+
/* ==========================================================================
−
   <head>
+
    HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
−
<style type="text/css">
+
  ========================================================================== */
−
 
+
html,
−
   #contentSub, #footer-box, #catlinks, #search-controls,
+
button,
−
   #p-logo, .printfooter, .firstHeading, .visualClear {
+
input,
−
      display: none;
+
select,
 +
textarea {
 +
  color: #222;
 +
}
 +
body {
 +
  font-size: 1em;
 +
  line-height: 1.4;
 +
}
 +
::-moz-selection {
 +
  background: #b3d4fc;
 +
  text-shadow: none;
 +
}
 +
::selection {
 +
  background: #b3d4fc;
 +
  text-shadow: none;
 +
}
 +
hr {
 +
  display: block;
 +
  height: 1px;
 +
  border: 0;
 +
  border-top: 1px solid #ccc;
 +
  margin: 1em 0;
 +
  padding: 0;
 +
}
 +
img {
 +
  vertical-align: middle;
 +
}
 +
fieldset {
 +
  border: 0;
 +
  margin: 0;
 +
  padding: 0;
 +
}
 +
textarea {
 +
  resize: vertical;
 +
}
 +
.chromeframe {
 +
  margin: 0.2em 0;
 +
  background: #ccc;
 +
  color: #000;
 +
  padding: 0.2em 0;
 +
}
 +
/* ==========================================================================
 +
  Helper classes
 +
  ========================================================================== */
 +
.hidden {
 +
  display: none !important;
 +
  visibility: hidden;
 +
}
 +
.visuallyhidden {
 +
  border: 0;
 +
  clip: rect(0 0 0 0);
 +
  height: 1px;
 +
  margin: -1px;
 +
  overflow: hidden;
 +
  padding: 0;
 +
  position: absolute;
 +
  width: 1px;
 +
}
 +
.visuallyhidden.focusable:active,
 +
.visuallyhidden.focusable:focus {
 +
  clip: auto;
 +
  height: auto;
 +
  margin: 0;
 +
  overflow: visible;
 +
  position: static;
 +
  width: auto;
 +
}
 +
.invisible {
 +
  visibility: hidden;
 +
}
 +
.clearfix:before,
 +
.clearfix:after {
 +
  content: " ";
 +
  display: table;
 +
}
 +
.clearfix:after {
 +
  clear: both;
 +
}
 +
.clearfix {
 +
  *zoom: 1;
 +
}
 +
.text-muted {
 +
  color: #848b8f;
 +
}
 +
/* ==========================================================================
 +
    Forms
 +
  ========================================================================== */
 +
form input[type="text"],
 +
form input[type="email"],
 +
form input[type="number"],
 +
form input[type="password"] {
 +
  background: #fff;
 +
  color: #777;
 +
  border: 1px solid #dddddd;
 +
  padding: 12px 15px;
 +
  width: 100%;
 +
  -webkit-transition: all 250ms ease-in-out;
 +
  -moz-transition: all 250ms ease-in-out;
 +
  -o-transition: all 250ms ease-in-out;
 +
  transition: all 250ms ease-in-out;
 +
}
 +
form input[type="text"]:focus,
 +
form input[type="email"]:focus,
 +
form input[type="number"]:focus,
 +
form input[type="password"]:focus {
 +
  -webkit-box-shadow: none !important;
 +
  -moz-box-shadow: none !important;
 +
  box-shadow: none !important;
 +
  outline: none !important;
 +
  border-color: #f57e37;
 +
}
 +
label {
 +
  font-weight: normal;
 +
}
 +
/*
 +
* jQuery FlexSlider v2.2.0
 +
* http://www.woothemes.com/flexslider/
 +
*
 +
* Copyright 2012 WooThemes
 +
* Free to use under the GPLv2 license.
 +
* http://www.gnu.org/licenses/gpl-2.0.html
 +
*
 +
* Contributing author: Tyler Smith (@mbmufffin)
 +
*/
 +
/* Browser Resets
 +
*********************************/
 +
.flex-container a:active,
 +
.flexslider a:active,
 +
.flex-container a:focus,
 +
.flexslider a:focus {
 +
  outline: none;
 +
}
 +
.slides,
 +
.flex-control-nav,
 +
.flex-direction-nav {
 +
  margin: 0;
 +
  padding: 0;
 +
  list-style: none;
 +
}
 +
/* Icon Fonts
 +
*********************************/
 +
/* Font-face Icons */
 +
@font-face {
 +
  font-family: 'flexslider-icon';
 +
  src: url('../fonts/flexslider-icon.eot');
 +
  src: url('../fonts/flexslider-icon.eot?#iefix') format('embedded-opentype'), url('../fonts/flexslider-icon.woff') format('woff'), url('../fonts/flexslider-icon.ttf') format('truetype'), url('../fonts/flexslider-icon.svg#flexslider-icon') format('svg');
 +
  font-weight: normal;
 +
  font-style: normal;
 +
}
 +
/* FlexSlider Necessary Styles
 +
*********************************/
 +
.flexslider {
 +
  margin: 0;
 +
  padding: 0;
 +
}
 +
.flexslider .slides > li {
 +
  display: none;
 +
  -webkit-backface-visibility: hidden;
 +
}
 +
/* Hide the slides before the JS is loaded. Avoids image jumping */
 +
.flexslider .slides img {
 +
  width: 100%;
 +
  display: block;
 +
}
 +
.flex-pauseplay span {
 +
  text-transform: capitalize;
 +
}
 +
/* Clearfix for the .slides element */
 +
.slides:after {
 +
  content: ".";
 +
  display: block;
 +
  clear: both;
 +
  visibility: hidden;
 +
  line-height: 0;
 +
  height: 0;
 +
}
 +
html[xmlns] .slides {
 +
  display: block;
 +
}
 +
* html .slides {
 +
  height: 1%;
 +
}
 +
/* No JavaScript Fallback */
 +
/* If you are not using another script, such as Modernizr, make sure you
 +
* include js that eliminates this class on page load */
 +
.no-js .slides > li:first-child {
 +
  display: block;
 +
}
 +
/* FlexSlider Default Theme
 +
*********************************/
 +
.flexslider {
 +
  margin: 0;
 +
  background: transparent;
 +
  position: relative;
 +
  zoom: 1;
 +
  overflow: hidden;
 +
}
 +
.flex-viewport {
 +
  max-height: 2000px;
 +
  -webkit-transition: all 1s ease;
 +
  -moz-transition: all 1s ease;
 +
  -o-transition: all 1s ease;
 +
  transition: all 1s ease;
 +
}
 +
.loading .flex-viewport {
 +
  max-height: 300px;
 +
}
 +
.flexslider .slides {
 +
  zoom: 1;
 +
}
 +
.carousel li {
 +
  margin-right: 5px;
 +
}
 +
/* Direction Nav */
 +
.flex-direction-nav {
 +
  *height: 0;
 +
}
 +
.flex-direction-nav a {
 +
  text-decoration: none;
 +
  display: block;
 +
  width: 40px;
 +
  height: 40px;
 +
  margin: -20px 0 0;
 +
  position: absolute;
 +
  top: 50%;
 +
  z-index: 10;
 +
  overflow: hidden;
 +
  opacity: 0;
 +
  cursor: pointer;
 +
  -webkit-transition: all .3s ease;
 +
  -moz-transition: all .3s ease;
 +
  transition: all .3s ease;
 +
}
 +
.flex-direction-nav .flex-prev {
 +
  left: -50px;
 +
}
 +
.flex-direction-nav .flex-next {
 +
  right: -50px;
 +
  text-align: right;
 +
}
 +
.flexslider:hover .flex-prev {
 +
  opacity: 1;
 +
  left: 30px;
 +
}
 +
.flexslider:hover .flex-next {
 +
  opacity: 1;
 +
  right: 30px;
 +
}
 +
.flexslider:hover .flex-next:hover,
 +
.flexslider:hover .flex-prev:hover {
 +
  opacity: 1;
 +
}
 +
.flex-direction-nav .flex-disabled {
 +
  opacity: 0!important;
 +
  filter: alpha(opacity=0);
 +
  cursor: default;
 +
}
 +
.flex-direction-nav a:before {
 +
  font-family: "flexslider-icon";
 +
  color: #fff;
 +
  font-size: 24px;
 +
  line-height: 1;
 +
  display: inline-block;
 +
  content: '\f001';
 +
}
 +
.flex-direction-nav a.flex-next:before {
 +
  content: '\f002';
 +
}
 +
/* Pause/Play */
 +
.flex-pauseplay a {
 +
  display: block;
 +
  width: 20px;
 +
  height: 20px;
 +
  position: absolute;
 +
  bottom: 5px;
 +
  left: 10px;
 +
  opacity: 0.8;
 +
  z-index: 10;
 +
  overflow: hidden;
 +
  cursor: pointer;
 +
  color: #000;
 +
}
 +
.flex-pauseplay a:before {
 +
  font-family: "flexslider-icon";
 +
   font-size: 20px;
 +
  display: inline-block;
 +
  content: '\f004';
 +
}
 +
.flex-pauseplay a:hover {
 +
  opacity: 1;
 +
}
 +
.flex-pauseplay a.flex-play:before {
 +
  content: '\f003';
 +
}
 +
/* Control Nav */
 +
.flex-control-nav {
 +
   width: 100%;
 +
  position: absolute;
 +
  bottom: -40px;
 +
  text-align: center;
 +
}
 +
.flex-control-nav li {
 +
  margin: 0 6px;
 +
  display: inline-block;
 +
  zoom: 1;
 +
  *display: inline;
 +
}
 +
.flex-control-paging li a {
 +
  width: 11px;
 +
  height: 11px;
 +
  display: block;
 +
  background: #666;
 +
  background: rgba(0, 0, 0, 0.5);
 +
  cursor: pointer;
 +
  text-indent: -9999px;
 +
  -webkit-border-radius: 20px;
 +
  -moz-border-radius: 20px;
 +
  -o-border-radius: 20px;
 +
  border-radius: 20px;
 +
  -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
 +
  -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
 +
   -o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
 +
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
 +
}
 +
.flex-control-paging li a:hover {
 +
  background: #333;
 +
  background: rgba(0, 0, 0, 0.7);
 +
}
 +
.flex-control-paging li a.flex-active {
 +
  background: #000;
 +
  background: rgba(0, 0, 0, 0.9);
 +
  cursor: default;
 +
}
 +
.flex-control-thumbs {
 +
  margin: 5px 0 0;
 +
  position: static;
 +
  overflow: hidden;
 +
}
 +
.flex-control-thumbs li {
 +
  width: 25%;
 +
  float: left;
 +
  margin: 0;
 +
}
 +
.flex-control-thumbs img {
 +
  width: 100%;
 +
  display: block;
 +
  opacity: .7;
 +
  cursor: pointer;
 +
}
 +
.flex-control-thumbs img:hover {
 +
  opacity: 1;
 +
}
 +
.flex-control-thumbs .flex-active {
 +
  opacity: 1;
 +
  cursor: default;
 +
}
 +
@media screen and (max-width: 860px) {
 +
  .flex-direction-nav .flex-prev {
 +
    opacity: 1;
 +
    left: 10px;
 
   }
 
   }
−
   #globalWrapper, #content {  
+
   .flex-direction-nav .flex-next {
−
     width: 100%;
+
     opacity: 1;
−
     height: 100%;
+
     right: 10px;
−
    border: 0px;
+
−
    background-color: #39c8e2;
+
−
    margin: 0px;
+
−
    padding: 0px;
+
−
    font-size: 100%;
+
 
   }
 
   }
−
img.resize50{
 
−
  max-width:50%;
 
−
  max-height:50%;
 
 
}
 
}
−
</style>
+
#lightbox {
−
    <!--  
+
  cursor: pointer;
−
    Stone Template
+
  position: fixed;
−
    http://www.templatemo.com/preview/templatemo_452_stone
+
  width: 100%;
−
    -->
+
  height: 100%;
−
    <!-- Bootstrap Stylesheet -->
+
  top: 0;
−
    <link rel="stylesheet" href="https://2015.igem.org/Team:EPF_Lausanne/Test/css/bootstrap?action=raw&amp;ctype=text/css" type="text/css">
+
  left: 0;
−
      
+
  background: #000000;
−
     <!-- FontAwesome Icons -->
+
  /* IE Fallback (Solid Colour) */
−
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
+
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAIElEQVQ4T2NkYGDYDMRkA8ZRAxhGw4BhNAyA+WAYpAMAIFgLQfO9BoEAAAAASUVORK5CYII=);
−
   
+
  background: rgba(0, 0, 0, 0.7);
−
    <!-- Normailize Stylesheet -->
+
  -webkit-filter: none !important;
−
    <link rel="stylesheet" href="https://2015.igem.org/Team:EPF_Lausanne/Test/css/normalize?action=raw&amp;ctype=text/css" type="text/css">
+
  z-index: 99999;
 +
}
 +
#lightbox img {
 +
  display: block;
 +
  position: absolute;
 +
  border: 5px solid #fff;
 +
  box-shadow: 0 0 20px #000;
 +
  border-radius: 1px;
 +
}
 +
body.blurred > * {
 +
  -webkit-filter: blur(2px);
 +
}
 +
.lightbox-loading {
 +
  background: url(https://static.igem.org/mediawiki/2015/6/69/EPF_Lausanne_Loading.gif) center center no-repeat;
 +
  width: 31px;
 +
  height: 31px;
 +
  margin: -16px 0 0 -16px;
 +
  position: absolute;
 +
  top: 48%;
 +
  left: 50%;
 +
}
 +
.lightbox-caption {
 +
  display: none;
 +
  position: absolute;
 +
  left: 0;
 +
  bottom: 0;
 +
  width: 100%;
 +
  text-align: center;
 +
  z-index: 1000;
 +
  background: #000;
 +
  background: rgba(0, 0, 0, 0.7);
 +
}
 +
.lightbox-caption p {
 +
  margin: 0 auto;
 +
  max-width: 70%;
 +
  display: inline-block;
 +
  *display: inline;
 +
  *zoom: 1;
 +
  padding: 10px;
 +
  color: #fff;
 +
  font-size: 12px;
 +
  line-height: 18px;
 +
}
 +
.lightbox-button {
 +
  position: absolute;
 +
  z-index: 9999;
 +
  background: no-repeat center center;
 +
  width: 32px;
 +
  height: 32px;
 +
  opacity: 0.4;
 +
  -webkit-transition: all 0.3s;
 +
  -moz-transition: all 0.3s;
 +
  -ms-transition: all 0.3s;
 +
  transition: all 0.3s;
 +
}
 +
.lightbox-button:hover,
 +
.lightbox-button:focus {
 +
  opacity: 1;
 +
  -webkit-transform: scale(1.4);
 +
  -moz-transform: scale(1.4);
 +
  -ms-transform: scale(1.4);
 +
  transform: scale(1.4);
 +
}
 +
.lightbox-close {
 +
  right: 10px;
 +
  top: 10px;
 +
  background-image: url('https://static.igem.org/mediawiki/2015/7/71/EPF_Lausanne_Close.png');
 +
}
 +
.lightbox-next {
 +
  right: 10px;
 +
  top: 48%;
 +
  background-image: url('https://static.igem.org/mediawiki/2015/5/5f/EPF_Lausanne_Next.png');
 +
}
 +
.lightbox-previous {
 +
  left: 10px;
 +
  top: 48%;
 +
  background-image: url('https://static.igem.org/mediawiki/2015/6/62/EPF_Lausanne_Previous.png');
 +
}
 +
/* ==========================================================================
 +
  Print styles
 +
  ========================================================================== */
 +
@media print {
 +
  * {
 +
     background: transparent !important;
 +
     color: #000 !important;
 +
    /* Black prints faster: h5bp.com/s */
 +
    box-shadow: none !important;
 +
    text-shadow: none !important;
 +
  }
 +
  a,
 +
  a:visited {
 +
    text-decoration: underline;
 +
  }
 +
  a[href]:after {
 +
     content: " (" attr(href) ")";
 +
  }
 +
  abbr[title]:after {
 +
    content: " (" attr(title) ")";
 +
  }
 +
  /*
 +
    * Don't show links for images, or javascript/internal links
 +
    */
 +
  .ir a:after,
 +
  a[href^="javascript:"]:after,
 +
  a[href^="#"]:after {
 +
    content: "";
 +
  }
 +
  pre,
 +
  blockquote {
 +
    border: 1px solid #999;
 +
    page-break-inside: avoid;
 +
  }
 +
  thead {
 +
    display: table-header-group;
 +
    /* h5bp.com/t */
 +
  }
 +
  tr,
 +
  img {
 +
    page-break-inside: avoid;
 +
  }
 +
  img {
 +
    max-width: 100% !important;
 +
  }
 +
  @page {
 +
    margin: 0.5cm;
 +
  }
 +
  p,
 +
  h2,
 +
  h3 {
 +
    orphans: 3;
 +
    widows: 3;
 +
  }
 +
  h2,
 +
  h3 {
 +
    page-break-after: avoid;
 +
  }
 +
}
 +
/* ==========================================================================
 +
    Structure & Defaults
 +
  ========================================================================== */
 +
html,
 +
body {
 +
  font-size: 100%;
 +
  width: 100%;
 +
  height: 100%;
 +
}
 +
body {
 +
  background: #ffffff;
 +
  color: #777777;
 +
  font-size: 13px;
 +
  line-height: 24px;
 +
  font-family: 'Open Sans', sans-serif;
 +
}
 +
a {
 +
  color: #39c8e2;
 +
  text-decoration: none !important;
 +
  -webkit-transition: color 200ms ease-in-out;
 +
  -moz-transition: color 200ms ease-in-out;
 +
  -o-transition: color 200ms ease-in-out;
 +
  transition: color 200ms ease-in-out;
 +
}
 +
a:hover {
 +
  color: #232323;
 +
}
 +
h1,
 +
h2,
 +
h3,
 +
h4,
 +
h5,
 +
h6 {
 +
  font-family: 'Open Sans', sans-serif;
 +
  font-weight: 500;
 +
}
 +
/* ==========================================================================
 +
    Header
 +
  ========================================================================== */
  
−
    <!-- Main Styles -->
+
.dropdown:hover .dropdown-menu {
−
    <link rel="stylesheet" href="https://2015.igem.org/Team:EPF_Lausanne/Test/css/templatemo-style?action=raw&amp;ctype=text/css" type="text/css">
+
display: block;
−
 
+
}
−
    <!-- Footer -->
+
−
    <link rel="stylesheet" href="https://2015.igem.org/Team:EPF_Lausanne/css/footer?action=raw&amp;ctype=text/css" type="text/css">
+
−
 
+
−
    <script src="https://2015.igem.org/Team:EPF_Lausanne/Test/js/mordernizr-2.6.2?action=raw&amp;ctype=text/js"></script>
+
  
−
</head>
+
.navbar {
−
<body  class="loading">
+
  margin-bottom: 0;
−
    <!--[if lt IE 7]>
+
}
−
    <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
+
.navbar-default .navbar-toggle {
−
    <![endif]-->
+
  background-color: #fff;
−
 
+
  border-color: #fff;
−
    <!-- HEADER -->
+
  font-size: 14px;
−
 
+
  color: #39c8e2;
−
    <div class="site-header">
+
  margin-top: 18px;
−
        <div class="container">
+
  -webkit-border-radius: 0;
−
            <div class="row">
+
  -webkit-background-clip: padding-box;
−
                <nav class="navbar navbar-default navbar-static-top">
+
  -moz-border-radius: 0;
−
                    <div class="navbar-header">
+
  -moz-background-clip: padding;
−
                        <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#main-menu">
+
  border-radius: 0;
−
                            <span class="sr-only">Toggle navigation</span>
+
  background-clip: padding-box;
−
                            <i class="fa fa-bars"></i>
+
}
−
                        </button>
+
.navbar-default .navbar-toggle:hover,
−
                        <a class="navbar-brand" href="https://2015.igem.org/Team:EPF_Lausanne">Bio Logic</a>
+
.navbar-default .navbar-toggle:focus {
−
                    </div>
+
  background-color: #fff;
−
                    <div class="collapse navbar-collapse" id="main-menu">
+
  border: 1px solid #fff;
−
                        <ul class="nav navbar-nav navbar-right">
+
}
−
                            <li><a href="https://2015.igem.org/Team:EPF_Lausanne">Home</a></li>
+
.navbar-default .navbar-collapse,
−
                            <li class="dropdown">
+
.navbar-default .navbar-form {
−
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Project <span class="caret"></span></a>
+
  border-color: #fff;
−
                            <ul class="dropdown-menu">
+
}
−
                                <li><a href="https://2015.igem.org/Team:EPF_Lausanne/Project/Overview">Overview</a></li>
+
.navbar-default {
−
                                <li><a href="#">Organisms</a></li>
+
  background-color: transparent;
−
                                <li><a href="#">Applications</a></li>
+
  border-color: transparent;
−
                                <li><a href="#">Modelling</a></li>
+
}
−
                            </ul>
+
.navbar-header {
−
                            </li>
+
  padding-bottom: 15px;
−
                            <li class="dropdown">
+
}
−
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Achievements <span class="caret"></span></a>
+
.navbar-default .navbar-nav > li > a {
−
                            <ul class="dropdown-menu">
+
  color: #ffffff;
−
                                <li><a href="#">Results</a></li>
+
  text-transform: uppercase;
−
                                <li><a href="#">Data</a></li>
+
  font-size: 14px;
−
                                <li><a href="#">Judging</a></li>
+
}
−
                                <li><a href="#">Parts</a></li>
+
.navbar-default .navbar-nav > li > a:hover {
−
                            </ul>
+
  color: #fff;
−
                            </li>
+
}
−
                            <li class="dropdown">
+
.navbar-default .navbar-nav > li {
−
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Policy and Practices <span class="caret"></span></a>
+
  border-right: 1px solid #1eb0ca;
−
                            <ul class="dropdown-menu">
+
  padding: 10px;
−
                                <li><a href="#">Human Practices</a></li>
+
}
−
                                <li><a href="#">Safety</a></li>
+
.navbar-default .navbar-nav > li:first-child {
−
                            </ul>
+
  border-left: 1px solid #1eb0ca;
−
                            </li>
+
}
−
                            <li class="dropdown">
+
.navbar-default .navbar-brand {
−
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Notebook <span class="caret"></span></a>
+
  text-transform: uppercase;
−
                            <ul class="dropdown-menu">
+
  font-size: 32px;
−
                                <li><a href="#">Yeast</a></li>
+
  font-weight: 700;
−
                                <li><a href="#">E.coli</a></li>
+
  color: #fff;
−
                                <li><a href="#">Protocols</a></li>
+
  padding-top: 25px;
−
                            </ul>
+
  padding-bottom: 25px;
−
                            </li>
+
}
−
                            <li class="dropdown">
+
.navbar-default .navbar-brand:hover {
−
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Team <span class="caret"></span></a>
+
  color: #fff;
−
                            <ul class="dropdown-menu">
+
}
−
                                <li><a href="#">Meet us</a></li>
+
.site-header {
−
                                <li><a href="#">Attributions</a></li>
+
  background-color: #39c8e2;
−
                                <li><a href="#">Aknowledgements</a></li>
+
  color: #ffffff;
−
                                <li><a href="#">Timeline</a></li>
+
}
−
                            </ul>
+
.site-slider {
−
                            </li>
+
  position: relative;
−
                        </ul>
+
  z-index: 16;
−
                    </div>
+
}
−
                </nav>       
+
.site-slider .slide {
−
            </div>
+
  position: relative;
−
        </div>
+
}
−
    </div> <!-- .site-header -->
+
.site-slider .overlay {
−
 
+
  background-color: rgba(0, 0, 0, 0.3);
−
 
+
  position: absolute;
−
    <!-- SLIDER -->
+
  width: 100%;
−
    <div class="site-slider">
+
  height: 100%;
−
        <div class="flexslider">
+
  top: 0;
−
            <ul class="slides">
+
  left: 0;
−
                <li class="slide">
+
  z-index: 9;
−
                    <div class="overlay"></div>
+
}
−
                    <img src="https://static.igem.org/mediawiki/2015/0/05/Colouredscan.jpg" alt="">
+
.site-slider .slider-caption {
−
                    <div class="slider-caption">
+
  position: absolute;
−
                        <div class="title">
+
  z-index: 12;
−
                            <h2>YEAST IS THE </h2>
+
  width: 100%;
−
                            <h2>ANSWER</h2>
+
  top: 30%;
−
                        </div>
+
  text-align: center;
−
                        <a href="#Start" class="slider-button">Read More</a>
+
}
−
                    </div>
+
.site-slider .slider-caption .title {
−
                </li>
+
  width: 276px;
−
                <!--<li class="slide">
+
  margin: 0 auto;
−
                    <div class="overlay"></div>
+
  border: 4px solid #fff;
−
                    <img src="https://static.igem.org/mediawiki/2015/1/1c/EPF_Lausanne_Large_E.coli-plush.jpg" alt="">
+
  padding: 40px 40px 20px 40px;
−
                    <div class="slider-caption">
+
  text-align: center;
−
                        <div class="title">
+
}
−
                            <h2>E. COLI</h2>
+
.site-slider .slider-caption .title h2 {
−
                            <h2>IS AlSO</h2>
+
  margin: 0 0 20px 0;
−
                        </div>
+
  font-size: 28px;
−
                        <a href="#" class="slider-button">Read More</a>
+
  color: #fff;
−
                    </div>
+
  text-transform: uppercase;
−
                </li>-->
+
  font-weight: 700;
−
            </ul>
+
}
−
        </div>    
+
.site-slider .slider-caption .slider-button {
−
    </div> <!-- .site-slider -->
+
  color: #fff;
−
<!--
+
  margin-top: 60px;
−
    <div id="Start" class="first-section">
+
  display: inline-block;
−
        <div class="container">
+
  border: 2px solid #fff;
−
            <div class="row">
+
  padding: 7px 45px;
−
                <div class="col-md-6 col-centered">
+
  text-transform: uppercase;
−
                    <h3>Logic Orthogonal GRNA Implemented Circuit</h3>
+
  font-weight: 700;
−
                    <p>The aim of our project is to enable the simple and reproducible design of modular digital circuits within living cells. Cells possess the ability to accept biological data as input and process it according to predefined instructions. We plan to harness this potential by designing bio-elements that behave as transistors. Our goal is to assemble these transistors to create a programmable logic gate array.</p>
+
  -webkit-border-radius: 3px;
−
                    <h2>Thinking Binary</h2>
+
  -webkit-background-clip: padding-box;
−
                    <p>Boolean Logic is the bedrock of the digital revolution. Developed by George Boole in the mid-19th century, it is based on a simple set of values: 0 (“FALSE”) or 1 (“TRUE”). In computers, all information is represented by strings of 0s and 1s - multiple representations of binary digits or “Bits”. Bits are physically implemented by two-state devices named transistors. The assembling of transistors forms logic gates - which enables digital circuits to exhibit incredibly complex behaviours in the everyday objects that surround us.</p>
+
  -moz-border-radius: 3px;
−
                    <h2>A Biological Computer</h2>
+
  -moz-background-clip: padding;
−
                    <p>Creating customizable logic gates in living cells holds the promise of revolutionizing our ability to dictate the behaviour of organism and the way they react to distinct molecular cues. This involves designing logic circuits capable of linking the many genetic regulatory networks responsible for biologic operations.  An ideal genetic logic device should therefore be modular and reusable, enabling scientists to implement any complex logic functions in multiple biological systems. Our goal this summer is to achieve this by using gRNA-dCas9 combinations as the  biological equivalent of the wires that connect the different components of electric circuits.<br>
+
  border-radius: 3px;
−
                    Cas9 (CRISPR associated protein 9) is an RNA-guided DNA endonuclease enzyme that can target and cleave any DNA sequence complementary to its guide RNA (gRNA). Our logic gates will be based upon a derivative of this technology, the catalytically “dead” Cas9 (dCas9) that lacks the ability to cleave DNA. dCas9’s has the very interesting property of acting as  programmable transcription regulator. It it can act either as repressor by preventing the binding of the RNA polymerase (RNAP) to the targeted DNA or as an activator when fused to a polymerase recruiting element (the omega subunit of RNAP in E. Coli and VP64 in Yeast). <br>
+
  background-clip: padding-box;
−
                    To create a modular system based on these elements, we will design two different plasmids: a gate array and a linker. The gate array will contain a predefined set of logic gates. The code linking the different gates will be written on the customizeable linker plasmid. <br>
+
}
−
                    With this project, we hope to help create robust biologically based digital devices by successfully implementing modular orthogonal logic gates in living organisms. The applications of logic circuits implemented in a biological context are vast and range from the creation of smart cells able to monitor their environment for external stimuli to new forms of cellular therapeutics with improved in vivo targeting and curing. </p>
+
.col-centered{
−
                </div>
+
    float: none;
−
 
+
    margin: 0 auto;
−
                <div class="col-md-6 text-center">
+
}
−
                    <div class="image-holder">
+
.first-section {
−
                        <img class="resize50" src="https://static.igem.org/mediawiki/2015/5/59/Logo_iGEM_w.png" alt="">
+
  color: #E6E6E6;
−
                    </div>
+
  position: relative;
−
                </div>
+
  z-index: 17;
−
            </div>
+
  padding: 20px 0;
−
        </div>
+
  margin-top: -86px;
−
    </div>
+
  background-color: #2E2E2E;
−
        -->
+
  background-size: cover;
−
    <div id="Start" class="second-section">
+
}
−
        <div class="container">
+
.first-section h3 {
−
            <div class="row">
+
  text-transform: uppercase;
−
                <div class="col-md-8 col-centered">
+
  font-weight: 500;
−
                    <h3>Logic Orthogonal GRNA Implemented Circuit</h3>
+
  font-size: 24px;
−
                    <p>The aim of our project is to enable the simple and reproducible design of modular digital circuits within living cells. Cells possess the ability to accept biological data as input and process it according to predefined instructions. We plan to harness this potential by designing bio-elements that behave as transistors. Our goal is to assemble these transistors to create a programmable logic gate array.</p>
+
  color: #39c8e2;
−
                    <h2>Thinking Binary</h2>
+
}
−
                    <p>Boolean Logic is the bedrock of the digital revolution. Developed by George Boole in the mid-19th century, it is based on a simple set of values: 0 (“FALSE”) or 1 (“TRUE”).  In computers, all information is represented by strings of 0s and 1s - multiple representations of binary digits or “Bits”. Bits are physically implemented by two-state devices named transistors. The assembling of transistors forms logic gates - which enables digital circuits to exhibit incredibly complex behaviours in the everyday objects that surround us.</p>
+
.first-section h2 {
−
                    <h2>A Biological Computer</h2>
+
  text-align: center;
−
                    <p>Creating customizable logic gates in living cells holds the promise of revolutionizing our ability to dictate the behaviour of organism and the way they react to distinct molecular cues. This involves designing logic circuits capable of linking the many genetic regulatory networks responsible for biologic operations. An ideal genetic logic device should therefore be modular and reusable, enabling scientists to implement any complex logic functions in multiple biological systems. Our goal this summer is to achieve this by using gRNA-dCas9 combinations as the  biological equivalent of the wires that connect the different components of electric circuits.<br>
+
  color: #39c8e2;
−
                    Cas9 (CRISPR associated protein 9) is an RNA-guided DNA endonuclease enzyme that can target and cleave any DNA sequence complementary to its guide RNA (gRNA). Our logic gates will be based upon a derivative of this technology, the catalytically “dead” Cas9 (dCas9) that lacks the ability to cleave DNA. dCas9’s has the very interesting property of acting as  programmable transcription regulator. It it can act either as repressor by preventing the binding of the RNA polymerase (RNAP) to the targeted DNA or as an activator when fused to a polymerase recruiting element (the omega subunit of RNAP in E. Coli and VP64 in Yeast). <br>
+
  font-weight: 400;
−
                    To create a modular system based on these elements, we will design two different plasmids: a gate array and a linker. The gate array will contain a predefined set of logic gates. The code linking the different gates will be written on the customizeable linker plasmid. <br>
+
  margin: 0;
−
                    With this project, we hope to help create robust biologically based digital devices by successfully implementing modular orthogonal logic gates in living organisms. The applications of logic circuits implemented in a biological context are vast and range from the creation of smart cells able to monitor their environment for external stimuli to new forms of cellular therapeutics with improved in vivo targeting and curing. </p>
+
}
−
                </div>
+
.first-section .image-holder {
−
            </div>
+
  margin-top: 50px;
−
        </div>
+
  overflow: hidden;
−
    </div>
+
}
−
 
+
.second-section {
−
<!--
+
  color: #333333;
−
    <div class="second-section">
+
  position: relative;
−
        <div class="container">
+
  z-index: 18;
−
            <div class="row">
+
  padding: 40px 0;
−
                <div class="col-md-3 col-sm-6 text-center">
+
  margin-top: -40px;
−
                    <h4>Thinking binary</h4>
+
  background-color: #EBEBEB;
−
                    <p>Boolean Logic is the bedrock of the digital revolution. Developed by George Boole in the mid-19th century, it is based on a simple set of values: 0 (“FALSE”) or 1 (“TRUE”).  In computers, all information is represented by strings of 0s and 1s - multiple representations of binary digits or “Bits”. Bits are physically implemented by two-state devices named transistors. The assembling of transistors forms logic gates - which enables digital circuits to exhibit incredibly complex behaviours in the everyday objects that surround us.</p>
+
  /*background-size: cover;*/
−
                </div>
+
}
−
                <div class="col-md-3 col-sm-6 text-center">
+
.second-section h3 {
−
                    <img src="https://static.igem.org/mediawiki/2015/5/57/EPF_Lausanne_Website_design.png" alt="">
+
  text-align: center;
−
                    <h4>Command our plasmids</h4>
+
  text-transform: uppercase;
−
                </div>
+
  font-weight: 500;
−
                <div class="col-md-3 col-sm-6 text-center">
+
  font-size: 24px;
−
                    <img src="https://static.igem.org/mediawiki/2015/3/37/EPF_Lausanne_DNA.png" alt="">
+
  color: #000066;
−
                    <h4>Insert plasmid</h4>
+
}
−
                </div>
+
.second-section h2 {
−
                <div class="col-md-3 col-sm-6 text-center">
+
  text-align: center;
−
                    <img src="https://static.igem.org/mediawiki/2015/e/e4/EPF_Lausanne_World.png" alt="">
+
  color: #191975;
−
                    <h4>Save the world</h4>
+
  font-weight: 400;
−
                </div>
+
  margin: 0;
−
            </div>
+
}
−
        </div>
+
.second-section p {
−
    </div>
+
  font-size: 16px;
−
-->
+
  color : #2F2F2F;
−
 
+
}
−
 
+
.second-section .col-md-3 {
−
  <!-- <div class="third-section">
+
  margin-top: 60px;
−
        <div class="container">
+
}
−
            <div class="row">
+
.second-section h4 {
−
                <div class="col-md-6">
+
  font-size: 16px;
−
                    <h2>Thinking Binary</h2>
+
  font-weight: 600;
−
                    <p>Boolean Logic is the bedrock of the digital revolution. Developed by George Boole in the mid-19th century, it is based on a simple set of values: 0 (“FALSE”) or 1 (“TRUE”). In computers, all information is represented by strings of 0s and 1s - multiple representations of binary digits or “Bits”. Bits are physically implemented by two-state devices named transistors. The assembling of transistors forms logic gates - which enables digital circuits to exhibit incredibly complex behaviours in the everyday objects that surround us.</p>
+
}
−
                </div>
+
.third-section {
−
            </div>
+
  color: #fff;
−
            <div class="row">
+
  position: relative;
−
                <div class="col-md-6">
+
  z-index: 19;
−
                    <h2>A Biological Computer</h2>
+
  padding: 80px 0 20px 0;
−
                    <p>Creating customizable logic gates in living cells holds the promise of revolutionizing our ability to dictate the behaviour of organism and the way they react to distinct molecular cues. This involves designing logic circuits capable of linking the many genetic regulatory networks responsible for biologic operations.  An ideal genetic logic device should therefore be modular and reusable, enabling scientists to implement any complex logic functions in multiple biological systems. Our goal this summer is to achieve this by using gRNA-dCas9 combinations as the  biological equivalent of the wires that connect the different components of electric circuits.<br>
+
  margin-top: -20px;
−
                    Cas9 (CRISPR associated protein 9) is an RNA-guided DNA endonuclease enzyme that can target and cleave any DNA sequence complementary to its guide RNA (gRNA). Our logic gates will be based upon a derivative of this technology, the catalytically “dead” Cas9 (dCas9) that lacks the ability to cleave DNA. dCas9’s has the very interesting property of acting as  programmable transcription regulator. It it can act either as repressor by preventing the binding of the RNA polymerase (RNAP) to the targeted DNA or as an activator when fused to a polymerase recruiting element (the omega subunit of RNAP in E. Coli and VP64 in Yeast).</p>
+
  background: url('https://static.igem.org/mediawiki/2015/d/d7/EPF_Lausanne_Bg3.png') no-repeat top center;
−
                </div>
+
  background-size: cover;
−
                <div class="col-md-6">
+
}
−
                    <h2>The bio part</h2>
+
.third-section h2 {
−
                    <p>To create a modular system based on these elements, we will design two different plasmids: a gate array and a linker. The gate array will contain a predefined set of logic gates. The code linking the different gates will be written on the customizeable linker plasmid. <br>
+
  text-align: center;
−
                    With this project, we hope to help create robust biologically based digital devices by successfully implementing modular orthogonal logic gates in living organisms. The applications of logic circuits implemented in a biological context are vast and range from the creation of smart cells able to monitor their environment for external stimuli to new forms of cellular therapeutics with improved in vivo targeting and curing. </p>
+
  color: #39c8e2;
−
                </div>
+
  font-weight: 700;
−
            </div>
+
  margin: 0;
−
        </div>
+
}
−
    </div>
+
.third-section span {
−
-->
+
  display: block;
−
    <div class="fourth-section">
+
  margin-bottom: 30px;
−
        <div class="container">
+
}
−
            <div class="row">
+
.third-section .col-md-6 {
−
                <div class="col-md-12 text-center">
+
  margin-bottom: 60px;
−
                    <h2>Still under construction</h2>
+
}
−
                </div>
+
.third-section ol {
−
            </div>
+
  margin-bottom: 30px;
−
        </div>
+
}
−
    </div>
+
.third-section ol li {
−
 
+
  color: #39c8e2;
−
 
+
}
−
    <footer class="footer-distributed">
+
.third-section ol li h4 {
−
 
+
  font-size: 15px;
−
            <div class="footer-left">
+
  margin: 0;
−
 
+
}
−
                <img class="resize50" src="https://static.igem.org/mediawiki/2015/5/59/Logo_iGEM_w.png" alt="">
+
.third-section ol li p {
−
 
+
  margin: 0 0 20px 20px;
−
            </div>
+
  color: #fff;
−
 
+
}
−
            <div class="footer-center">
+
.third-section ol li ol {
−
 
+
  margin: 0 0 30px 20px;
−
                <div>
+
}
−
                    <i class="fa fa-map-marker"></i>
+
.third-section ol.no-color li {
−
                    <p><span>Route Cantonale</span> Lausanne, Suisse</p>
+
  color: #fff;
−
                </div>
+
}
−
 
+
.fourth-section {
−
                <div>
+
  color: #fff;
−
                    <i class="fa fa-envelope"></i>
+
  position: relative;
−
                    <p><a href="mailto:iGEM2015dreamteam@groupes.epfl.ch">Contact us</a></p>
+
  z-index: 19;
−
                </div>
+
  padding: 150px 0;
−
 
+
  margin-top: -50px;
−
            </div>
+
  background: url('https://static.igem.org/mediawiki/2015/2/26/EPF_Lausanne_Bg4.png') no-repeat top center;
−
 
+
  background-size: cover;
−
            <div class="footer-right">
+
}
−
 
+
.fourth-section h2 {
−
                <p class="footer-company-about">
+
  font-size: 32px;
−
                    <span>About us</span>
+
  text-transform: uppercase;
−
                    Team of a dozen biotechnology students that will attempt to change the world
+
  font-weight: 700;
−
                </p>
+
   margin: 0 0 20px 0;
−
 
+
}
−
                <div class="footer-icons">
+
.fourth-section a {
−
 
+
  font-size: 18px;
−
                    <a href="https://www.facebook.com/pages/IGEM-EPFL-2015/1598472927106907" target="_blank"><i class="fa fa-facebook"></i></a>
+
}
−
                    <a href="https://instagram.com/igem2015epfl/" target="_blank"><i class="fa fa-instagram"></i></a>
+
.fourth-section a:hover {
−
                    <a href="https://twitter.com/EPFL_iGEM/" target="_blank"><i class="fa fa-twitter"></i></a>
+
  color: #39c8e2;
−
                </div>
+
}
−
 
+
.page-h {
−
            </div>
+
  background: url('https://static.igem.org/mediawiki/2015/a/ad/EPF_Lausanne_Headerbg.png') no-repeat bottom center;
−
 
+
  background-size: cover;
−
        </footer>
+
  padding: 60px 0;
−
 
+
}
−
    <script src="https://2015.igem.org/Team:EPF_Lausanne/Test/js/jquery?action=raw&amp;ctype=text/js"></script>
+
.page-h h3 {
−
     <script src="https://2015.igem.org/Team:EPF_Lausanne/Test/js/bootstrap?action=raw&amp;ctype=text/js"></script>
+
  font-size: 28px;
−
     <script src="https://2015.igem.org/Team:EPF_Lausanne/Test/js/plugins?action=raw&amp;ctype=text/js"></script>
+
  color: #fff;
−
     <script src="https://2015.igem.org/Team:EPF_Lausanne/Test/js/main?action=raw&amp;ctype=text/js"></script>    
+
  text-transform: uppercase;
−
   
+
  font-weight: 600;
−
</body>
+
}
−
</html>
+
.filter {
 +
  background: url('https://static.igem.org/mediawiki/2015/e/e6/EPF_Lausanne_Filterbg.png') no-repeat top center;
 +
  background-size: cover;
 +
  padding: 50px 0;
 +
  margin-top: -60px;
 +
}
 +
.filter ul {
 +
  padding: 0;
 +
  margin: 0;
 +
  list-style: none;
 +
}
 +
.filter ul li {
 +
  display: inline-block;
 +
  margin: 0 20px;
 +
  color: #fff;
 +
  cursor: pointer;
 +
}
 +
.filter ul li.active {
 +
  color: #39c8e2;
 +
}
 +
.products {
 +
  background: url('https://static.igem.org/mediawiki/2015/9/92/EPF_Lausanne_Productsbg.png') no-repeat top center;
 +
  background-size: cover;
 +
  padding: 120px 0 80px 0;
 +
  margin-top: -40px;
 +
}
 +
.products .thumb-p {
 +
  overflow: hidden;
 +
  position: relative;
 +
  -webkit-border-radius: 6px;
 +
  -webkit-background-clip: padding-box;
 +
  -moz-border-radius: 6px;
 +
  -moz-background-clip: padding;
 +
  border-radius: 6px;
 +
  background-clip: padding-box;
 +
}
 +
.products .thumb-p img {
 +
  width: 100%;
 +
}
 +
.products .thumb-p .overlay-p {
 +
  background-color: #39c8e2;
 +
  position: absolute;
 +
  width: 100%;
 +
  height: 100%;
 +
  top: 0;
 +
  left: 0;
 +
  -webkit-border-radius: 6px;
 +
  -webkit-background-clip: padding-box;
 +
  -moz-border-radius: 6px;
 +
  -moz-background-clip: padding;
 +
  border-radius: 6px;
 +
  background-clip: padding-box;
 +
  -webkit-transform: scaleY(0);
 +
  -moz-transform: scaleY(0);
 +
  -o-transform: scaleY(0);
 +
  -ms-transform: scaleY(0);
 +
  transform: scaleY(0);
 +
  -webkit-transition: all 200ms ease-in-out;
 +
  -moz-transition: all 200ms ease-in-out;
 +
  -o-transition: all 200ms ease-in-out;
 +
  transition: all 200ms ease-in-out;
 +
}
 +
.products .thumb-p .overlay-p a {
 +
  position: absolute;
 +
  top: 50%;
 +
  left: 50%;
 +
  margin: -7px 0 0 -8px;
 +
  font-size: 18px;
 +
  color: #fff;
 +
}
 +
.products .thumb-p:hover .overlay-p {
 +
  -webkit-transform: scaleY(1);
 +
  -moz-transform: scaleY(1);
 +
  -o-transform: scaleY(1);
 +
  -ms-transform: scaleY(1);
 +
  transform: scaleY(1);
 +
}
 +
.products .content-p {
 +
  margin-bottom: 40px;
 +
}
 +
.products .content-p h4 {
 +
  font-size: 16px;
 +
  font-weight: 700;
 +
  text-transform: uppercase;
 +
  color: #000;
 +
  margin: 15px 0 5px 0;
 +
}
 +
.products .content-p span {
 +
  font-size: 12px;
 +
  font-weight: 300;
 +
  text-transform: uppercase;
 +
  color: #000;
 +
}
 +
#Grid .mix {
 +
  display: none;
 +
}
 +
button.main-button,
 +
.main-button {
 +
  background-color: #39c8e2;
 +
  color: #fff;
 +
  padding: 10px 15px;
 +
  text-transform: uppercase;
 +
  font-weight: 700;
 +
  outline: 0;
 +
  border: 0;
 +
  -webkit-border-radius: 4px;
 +
  -webkit-background-clip: padding-box;
 +
  -moz-border-radius: 4px;
 +
  -moz-background-clip: padding;
 +
  border-radius: 4px;
 +
  background-clip: padding-box;
 +
}
 +
.contact {
 +
  background: url('https://static.igem.org/mediawiki/2015/9/92/EPF_Lausanne_Contactbg.png') no-repeat top center;
 +
  background-size: cover;
 +
  padding: 120px 0;
 +
  margin-top: -55px;
 +
}
 +
.contact fieldset {
 +
  margin-bottom: 30px;
 +
}
 +
.contact fieldset input,
 +
.contact fieldset textarea {
 +
  width: 100%;
 +
  min-width: 100%;
 +
  max-width: 100%;
 +
  background: rgba(250, 250, 250, 0.7);
 +
  border: 1px solid #999;
 +
  color: #777;
 +
}
 +
.contact fieldset input:focus,
 +
.contact fieldset textarea:focus {
 +
  border: 1px solid #39c8e2;
 +
  outline: 0;
 +
}
 +
.contact fieldset textarea {
 +
  padding: 15px;
 +
}
 +
.page-h.promotion {
 +
  padding-bottom: 100px;
 +
}
 +
.video-featured {
 +
  background: url('https://static.igem.org/mediawiki/2015/2/25/EPF_Lausanne_Bg1.png') no-repeat top center;
 +
  background-size: cover;
 +
  padding: 160px 0;
 +
  margin-top: -130px;
 +
}
 +
.video-featured .video-holder {
 +
  overflow: hidden;
 +
}
 +
.video-featured .video-holder iframe {
 +
  width: 100%;
 +
}
 +
.promotion-s {
 +
  background: url('https://static.igem.org/mediawiki/2015/8/8d/EPF_Lausanne_Promotionbg.png') no-repeat top center;
 +
  background-size: cover;
 +
  padding: 180px 0 120px 0;
 +
  margin-top: -120px;
 +
}
 +
.product-left {
 +
  color: #444444;
 +
  padding-right: 30px;
 +
}
 +
.product-left h3 {
 +
  text-transform: uppercase;
 +
  font-size: 18px;
 +
  font-weight: 700;
 +
}
 +
.product-left .product-image {
 +
  margin-right: 15px;
 +
  float: left;
 +
  overflow: hidden;
 +
}
 +
.product-content {
 +
  overflow: hidden;
 +
}
 +
.product-content h3 {
 +
  text-transform: uppercase;
 +
  font-size: 18px;
 +
  font-weight: 700;
 +
}
 +
.product-right {
 +
  padding-left: 30px;
 +
  color: #fff;
 +
}
 +
.product-right .product-image {
 +
  float: right;
 +
  overflow: hidden;
 +
  margin-left: 15px;
 +
}
 +
/*
 +
.site-footer {
 +
  position: relative;
 +
  z-index: 19;
 +
  padding: 100px 0 40px 0;
 +
  margin-top: -70px;
 +
  background: url('https://static.igem.org/mediawiki/2015/a/a7/EPF_Lausanne_Footerbg.png') no-repeat top center;
 +
  background-size: cover;
 +
}
 +
.site-footer ul.social {
 +
  width: 120px;
 +
  height: 120px;
 +
  overflow: hidden;
 +
  padding: 0;
 +
  margin: 0 auto;
 +
  list-style: none;
 +
  position: relative;
 +
  background: url('https://static.igem.org/mediawiki/2015/3/3d/EPF_LausanneSocialbg.png') no-repeat center;
 +
}
 +
.site-footer ul.social li {
 +
  display: inline-block;
 +
  position: absolute;
 +
}
 +
.site-footer ul.social li a {
 +
  width: 32px;
 +
  height: 32px;
 +
  text-align: center;
 +
  line-height: 32px;
 +
  -webkit-border-radius: 3px;
 +
  -webkit-background-clip: padding-box;
 +
  -moz-border-radius: 3px;
 +
  -moz-background-clip: padding;
 +
  border-radius: 3px;
 +
  background-clip: padding-box;
 +
  color: #fff;
 +
}
 +
.site-footer ul.social li.facebook {
 +
  top: 0;
 +
  left: 46px;
 +
}
 +
.site-footer ul.social li.facebook a {
 +
  background-color: #4c66a4;
 +
}
 +
.site-footer ul.social li.twitter {
 +
  top: 46px;
 +
  left: 0;
 +
}
 +
.site-footer ul.social li.twitter a {
 +
  background-color: #55acee;
 +
}
 +
.site-footer ul.social li.linkedin {
 +
  top: 46px;
 +
  left: 88px;
 +
}
 +
.site-footer ul.social li.linkedin a {
 +
  background-color: #006699;
 +
}
 +
.site-footer ul.social li.rss {
 +
  top: 88px;
 +
  left: 46px;
 +
}
 +
.site-footer ul.social li.rss a {
 +
  background-color: #fb6405;
 +
}
 +
.site-footer p {
 +
  display: block;
 +
}*/
 +
/*  Medium devices (desktops, 992px and up)  */
 +
@media (max-width: 992px) {
 +
  .slider-button {
 +
    display: none;
 +
  }
 +
}
 +
/*  Small devices (tablets, 768px and up)  */
 +
@media (max-width: 768px) {
 +
  .slider-caption {
 +
     display: none;
 +
  }
 +
  .first-section {
 +
    background-position: left;
 +
     margin-top: -20px;
 +
  }
 +
  .contact form {
 +
    margin-top: 60px;
 +
  }
 +
  .product-left {
 +
     color: #fff;
 +
  }
 +
}
 +
/* ==========================================================================
 +
   Media Queries
 +
  ========================================================================== */

Revision as of 13:26, 15 July 2015

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800); /* ========================================================================== 

   HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
  ========================================================================== */

html, button, input, select, textarea { 

 color: #222;

} body { 

 font-size: 1em;
 line-height: 1.4;

}

-moz-selection {
 background: #b3d4fc;
 text-shadow: none;

}

selection {
 background: #b3d4fc;
 text-shadow: none;

} hr { 

 display: block;
 height: 1px;
 border: 0;
 border-top: 1px solid #ccc;
 margin: 1em 0;
 padding: 0;

} img { 

 vertical-align: middle;

} fieldset { 

 border: 0;
 margin: 0;
 padding: 0;

} textarea { 

 resize: vertical;

} .chromeframe { 

 margin: 0.2em 0;
 background: #ccc;
 color: #000;
 padding: 0.2em 0;

} /* ========================================================================== 

  Helper classes
  ========================================================================== */

.hidden { 

 display: none !important;
 visibility: hidden;

} .visuallyhidden { 

 border: 0;
 clip: rect(0 0 0 0);
 height: 1px;
 margin: -1px;
 overflow: hidden;
 padding: 0;
 position: absolute;
 width: 1px;

} .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { 

 clip: auto;
 height: auto;
 margin: 0;
 overflow: visible;
 position: static;
 width: auto;

} .invisible { 

 visibility: hidden;

} .clearfix:before, .clearfix:after { 

 content: " ";
 display: table;

} .clearfix:after { 

 clear: both;

} .clearfix { 

 *zoom: 1;

} .text-muted { 

 color: #848b8f;

} /* ========================================================================== 

   Forms
  ========================================================================== */

form input[type="text"], form input[type="email"], form input[type="number"], form input[type="password"] { 

 background: #fff;
 color: #777;
 border: 1px solid #dddddd;
 padding: 12px 15px;
 width: 100%;
 -webkit-transition: all 250ms ease-in-out;
 -moz-transition: all 250ms ease-in-out;
 -o-transition: all 250ms ease-in-out;
 transition: all 250ms ease-in-out;

} form input[type="text"]:focus, form input[type="email"]:focus, form input[type="number"]:focus, form input[type="password"]:focus { 

 -webkit-box-shadow: none !important;
 -moz-box-shadow: none !important;
 box-shadow: none !important;
 outline: none !important;
 border-color: #f57e37;

} label { 

 font-weight: normal;

} /* 

* jQuery FlexSlider v2.2.0
* http://www.woothemes.com/flexslider/
*
* Copyright 2012 WooThemes
* Free to use under the GPLv2 license.
* http://www.gnu.org/licenses/gpl-2.0.html
*
* Contributing author: Tyler Smith (@mbmufffin)
*/

/* Browser Resets

                                                                  • /

.flex-container a:active, .flexslider a:active, .flex-container a:focus, .flexslider a:focus { 

 outline: none;

} .slides, .flex-control-nav, .flex-direction-nav { 

 margin: 0;
 padding: 0;
 list-style: none;

} /* Icon Fonts

                                                                  • /

/* Font-face Icons */ @font-face { 

 font-family: 'flexslider-icon';
 src: url('../fonts/flexslider-icon.eot');
 src: url('../fonts/flexslider-icon.eot?#iefix') format('embedded-opentype'), url('../fonts/flexslider-icon.woff') format('woff'), url('../fonts/flexslider-icon.ttf') format('truetype'), url('../fonts/flexslider-icon.svg#flexslider-icon') format('svg');
 font-weight: normal;
 font-style: normal;

} /* FlexSlider Necessary Styles

                                                                  • /

.flexslider { 

 margin: 0;
 padding: 0;

} .flexslider .slides > li { 

 display: none;
 -webkit-backface-visibility: hidden;

} /* Hide the slides before the JS is loaded. Avoids image jumping */ .flexslider .slides img { 

 width: 100%;
 display: block;

} .flex-pauseplay span { 

 text-transform: capitalize;

} /* Clearfix for the .slides element */ .slides:after { 

 content: ".";
 display: block;
 clear: both;
 visibility: hidden;
 line-height: 0;
 height: 0;

} html[xmlns] .slides { 

 display: block;

}

  • html .slides {
 height: 1%;

} /* No JavaScript Fallback */ /* If you are not using another script, such as Modernizr, make sure you 

* include js that eliminates this class on page load */

.no-js .slides > li:first-child { 

 display: block;

} /* FlexSlider Default Theme

                                                                  • /

.flexslider { 

 margin: 0;
 background: transparent;
 position: relative;
 zoom: 1;
 overflow: hidden;

} .flex-viewport { 

 max-height: 2000px;
 -webkit-transition: all 1s ease;
 -moz-transition: all 1s ease;
 -o-transition: all 1s ease;
 transition: all 1s ease;

} .loading .flex-viewport { 

 max-height: 300px;

} .flexslider .slides { 

 zoom: 1;

} .carousel li { 

 margin-right: 5px;

} /* Direction Nav */ .flex-direction-nav { 

 *height: 0;

} .flex-direction-nav a { 

 text-decoration: none;
 display: block;
 width: 40px;
 height: 40px;
 margin: -20px 0 0;
 position: absolute;
 top: 50%;
 z-index: 10;
 overflow: hidden;
 opacity: 0;
 cursor: pointer;
 -webkit-transition: all .3s ease;
 -moz-transition: all .3s ease;
 transition: all .3s ease;

} .flex-direction-nav .flex-prev { 

 left: -50px;

} .flex-direction-nav .flex-next { 

 right: -50px;
 text-align: right;

} .flexslider:hover .flex-prev { 

 opacity: 1;
 left: 30px;

} .flexslider:hover .flex-next { 

 opacity: 1;
 right: 30px;

} .flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover { 

 opacity: 1;

} .flex-direction-nav .flex-disabled { 

 opacity: 0!important;
 filter: alpha(opacity=0);
 cursor: default;

} .flex-direction-nav a:before { 

 font-family: "flexslider-icon";
 color: #fff;
 font-size: 24px;
 line-height: 1;
 display: inline-block;
 content: '\f001';

} .flex-direction-nav a.flex-next:before { 

 content: '\f002';

} /* Pause/Play */ .flex-pauseplay a { 

 display: block;
 width: 20px;
 height: 20px;
 position: absolute;
 bottom: 5px;
 left: 10px;
 opacity: 0.8;
 z-index: 10;
 overflow: hidden;
 cursor: pointer;
 color: #000;

} .flex-pauseplay a:before { 

 font-family: "flexslider-icon";
 font-size: 20px;
 display: inline-block;
 content: '\f004';

} .flex-pauseplay a:hover { 

 opacity: 1;

} .flex-pauseplay a.flex-play:before { 

 content: '\f003';

} /* Control Nav */ .flex-control-nav { 

 width: 100%;
 position: absolute;
 bottom: -40px;
 text-align: center;

} .flex-control-nav li { 

 margin: 0 6px;
 display: inline-block;
 zoom: 1;
 *display: inline;

} .flex-control-paging li a { 

 width: 11px;
 height: 11px;
 display: block;
 background: #666;
 background: rgba(0, 0, 0, 0.5);
 cursor: pointer;
 text-indent: -9999px;
 -webkit-border-radius: 20px;
 -moz-border-radius: 20px;
 -o-border-radius: 20px;
 border-radius: 20px;
 -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
 -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
 -o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
 box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);

} .flex-control-paging li a:hover { 

 background: #333;
 background: rgba(0, 0, 0, 0.7);

} .flex-control-paging li a.flex-active { 

 background: #000;
 background: rgba(0, 0, 0, 0.9);
 cursor: default;

} .flex-control-thumbs { 

 margin: 5px 0 0;
 position: static;
 overflow: hidden;

} .flex-control-thumbs li { 

 width: 25%;
 float: left;
 margin: 0;

} .flex-control-thumbs img { 

 width: 100%;
 display: block;
 opacity: .7;
 cursor: pointer;

} .flex-control-thumbs img:hover { 

 opacity: 1;

} .flex-control-thumbs .flex-active { 

 opacity: 1;
 cursor: default;

} @media screen and (max-width: 860px) { 

 .flex-direction-nav .flex-prev {
   opacity: 1;
   left: 10px;
 }
 .flex-direction-nav .flex-next {
   opacity: 1;
   right: 10px;
 }

}

  1. lightbox {
 cursor: pointer;
 position: fixed;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 background: #000000;
 /* IE Fallback (Solid Colour) */
 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAIElEQVQ4T2NkYGDYDMRkA8ZRAxhGw4BhNAyA+WAYpAMAIFgLQfO9BoEAAAAASUVORK5CYII=);
 background: rgba(0, 0, 0, 0.7);
 -webkit-filter: none !important;
 z-index: 99999;

}

  1. lightbox img {
 display: block;
 position: absolute;
 border: 5px solid #fff;
 box-shadow: 0 0 20px #000;
 border-radius: 1px;

} body.blurred > * { 

 -webkit-filter: blur(2px);

} .lightbox-loading { 

 background: url(EPF_Lausanne_Loading.gif) center center no-repeat;
 width: 31px;
 height: 31px;
 margin: -16px 0 0 -16px;
 position: absolute;
 top: 48%;
 left: 50%;

} .lightbox-caption { 

 display: none;
 position: absolute;
 left: 0;
 bottom: 0;
 width: 100%;
 text-align: center;
 z-index: 1000;
 background: #000;
 background: rgba(0, 0, 0, 0.7);

} .lightbox-caption p { 

 margin: 0 auto;
 max-width: 70%;
 display: inline-block;
 *display: inline;
 *zoom: 1;
 padding: 10px;
 color: #fff;
 font-size: 12px;
 line-height: 18px;

} .lightbox-button { 

 position: absolute;
 z-index: 9999;
 background: no-repeat center center;
 width: 32px;
 height: 32px;
 opacity: 0.4;
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 -ms-transition: all 0.3s;
 transition: all 0.3s;

} .lightbox-button:hover, .lightbox-button:focus { 

 opacity: 1;
 -webkit-transform: scale(1.4);
 -moz-transform: scale(1.4);
 -ms-transform: scale(1.4);
 transform: scale(1.4);

} .lightbox-close { 

 right: 10px;
 top: 10px;
 background-image: url('https://static.igem.org/mediawiki/2015/7/71/EPF_Lausanne_Close.png');

} .lightbox-next { 

 right: 10px;
 top: 48%;
 background-image: url('https://static.igem.org/mediawiki/2015/5/5f/EPF_Lausanne_Next.png');

} .lightbox-previous { 

 left: 10px;
 top: 48%;
 background-image: url('https://static.igem.org/mediawiki/2015/6/62/EPF_Lausanne_Previous.png');

} /* ========================================================================== 

  Print styles
  ========================================================================== */

@media print { 

 * {
   background: transparent !important;
   color: #000 !important;
   /* Black prints faster: h5bp.com/s */
   box-shadow: none !important;
   text-shadow: none !important;
 }
 a,
 a:visited {
   text-decoration: underline;
 }
 a[href]:after {
   content: " (" attr(href) ")";
 }
 abbr[title]:after {
   content: " (" attr(title) ")";
 }
 /*
    * Don't show links for images, or javascript/internal links
    */
 .ir a:after,
 a[href^="javascript:"]:after,
 a[href^="#"]:after {
   content: "";
 }
 pre,
 blockquote {
   border: 1px solid #999;
   page-break-inside: avoid;
 }
 thead {
   display: table-header-group;
   /* h5bp.com/t */
 }
 tr,
 img {
   page-break-inside: avoid;
 }
 img {
   max-width: 100% !important;
 }
 @page {
   margin: 0.5cm;
 }
 p,
 h2,
 h3 {
   orphans: 3;
   widows: 3;
 }
 h2,
 h3 {
   page-break-after: avoid;
 }

} /* ========================================================================== 

   Structure & Defaults
  ========================================================================== */

html, body { 

 font-size: 100%;
 width: 100%;
 height: 100%;

} body { 

 background: #ffffff;
 color: #777777;
 font-size: 13px;
 line-height: 24px;
 font-family: 'Open Sans', sans-serif;

} a { 

 color: #39c8e2;
 text-decoration: none !important;
 -webkit-transition: color 200ms ease-in-out;
 -moz-transition: color 200ms ease-in-out;
 -o-transition: color 200ms ease-in-out;
 transition: color 200ms ease-in-out;

} a:hover { 

 color: #232323;

} h1, h2, h3, h4, h5, h6 { 

 font-family: 'Open Sans', sans-serif;
 font-weight: 500;

} /* ========================================================================== 

   Header
  ========================================================================== */

.dropdown:hover .dropdown-menu { display: block; }

.navbar { 

 margin-bottom: 0;

} .navbar-default .navbar-toggle { 

 background-color: #fff;
 border-color: #fff;
 font-size: 14px;
 color: #39c8e2;
 margin-top: 18px;
 -webkit-border-radius: 0;
 -webkit-background-clip: padding-box;
 -moz-border-radius: 0;
 -moz-background-clip: padding;
 border-radius: 0;
 background-clip: padding-box;

} .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { 

 background-color: #fff;
 border: 1px solid #fff;

} .navbar-default .navbar-collapse, .navbar-default .navbar-form { 

 border-color: #fff;

} .navbar-default { 

 background-color: transparent;
 border-color: transparent;

} .navbar-header { 

 padding-bottom: 15px;

} .navbar-default .navbar-nav > li > a { 

 color: #ffffff;
 text-transform: uppercase;
 font-size: 14px;

} .navbar-default .navbar-nav > li > a:hover { 

 color: #fff;

} .navbar-default .navbar-nav > li { 

 border-right: 1px solid #1eb0ca;
 padding: 10px;

} .navbar-default .navbar-nav > li:first-child { 

 border-left: 1px solid #1eb0ca;

} .navbar-default .navbar-brand { 

 text-transform: uppercase;
 font-size: 32px;
 font-weight: 700;
 color: #fff;
 padding-top: 25px;
 padding-bottom: 25px;

} .navbar-default .navbar-brand:hover { 

 color: #fff;

} .site-header { 

 background-color: #39c8e2;
 color: #ffffff;

} .site-slider { 

 position: relative;
 z-index: 16;

} .site-slider .slide { 

 position: relative;

} .site-slider .overlay { 

 background-color: rgba(0, 0, 0, 0.3);
 position: absolute;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 z-index: 9;

} .site-slider .slider-caption { 

 position: absolute;
 z-index: 12;
 width: 100%;
 top: 30%;
 text-align: center;

} .site-slider .slider-caption .title { 

 width: 276px;
 margin: 0 auto;
 border: 4px solid #fff;
 padding: 40px 40px 20px 40px;
 text-align: center;

} .site-slider .slider-caption .title h2 { 

 margin: 0 0 20px 0;
 font-size: 28px;
 color: #fff;
 text-transform: uppercase;
 font-weight: 700;

} .site-slider .slider-caption .slider-button { 

 color: #fff;
 margin-top: 60px;
 display: inline-block;
 border: 2px solid #fff;
 padding: 7px 45px;
 text-transform: uppercase;
 font-weight: 700;
 -webkit-border-radius: 3px;
 -webkit-background-clip: padding-box;
 -moz-border-radius: 3px;
 -moz-background-clip: padding;
 border-radius: 3px;
 background-clip: padding-box;

} .col-centered{ 

   float: none;
   margin: 0 auto;

} .first-section { 

 color: #E6E6E6;
 position: relative;
 z-index: 17;
 padding: 20px 0;
 margin-top: -86px;
 background-color: #2E2E2E;
 background-size: cover;

} .first-section h3 { 

 text-transform: uppercase;
 font-weight: 500;
 font-size: 24px;
 color: #39c8e2;

} .first-section h2 { 

 text-align: center;
 color: #39c8e2;
 font-weight: 400;
 margin: 0;

} .first-section .image-holder { 

 margin-top: 50px;
 overflow: hidden;

} .second-section { 

 color: #333333;
 position: relative;
 z-index: 18;
 padding: 40px 0;
 margin-top: -40px;
 background-color: #EBEBEB;
 /*background-size: cover;*/

} .second-section h3 { 

 text-align: center;
 text-transform: uppercase;
 font-weight: 500;
 font-size: 24px;
 color: #000066;

} .second-section h2 { 

 text-align: center;
 color: #191975;
 font-weight: 400;
 margin: 0;

} .second-section p { 

 font-size: 16px; 
 color : #2F2F2F;

} .second-section .col-md-3 { 

 margin-top: 60px;

} .second-section h4 { 

 font-size: 16px;
 font-weight: 600;

} .third-section { 

 color: #fff;
 position: relative;
 z-index: 19;
 padding: 80px 0 20px 0;
 margin-top: -20px;
 background: url('https://static.igem.org/mediawiki/2015/d/d7/EPF_Lausanne_Bg3.png') no-repeat top center;
 background-size: cover;

} .third-section h2 { 

 text-align: center;
 color: #39c8e2;
 font-weight: 700;
 margin: 0;

} .third-section span { 

 display: block;
 margin-bottom: 30px;

} .third-section .col-md-6 { 

 margin-bottom: 60px;

} .third-section ol { 

 margin-bottom: 30px;

} .third-section ol li { 

 color: #39c8e2;

} .third-section ol li h4 { 

 font-size: 15px;
 margin: 0;

} .third-section ol li p { 

 margin: 0 0 20px 20px;
 color: #fff;

} .third-section ol li ol { 

 margin: 0 0 30px 20px;

} .third-section ol.no-color li { 

 color: #fff;

} .fourth-section { 

 color: #fff;
 position: relative;
 z-index: 19;
 padding: 150px 0;
 margin-top: -50px;
 background: url('https://static.igem.org/mediawiki/2015/2/26/EPF_Lausanne_Bg4.png') no-repeat top center;
 background-size: cover;

} .fourth-section h2 { 

 font-size: 32px;
 text-transform: uppercase;
 font-weight: 700;
 margin: 0 0 20px 0;

} .fourth-section a { 

 font-size: 18px;

} .fourth-section a:hover { 

 color: #39c8e2;

} .page-h { 

 background: url('https://static.igem.org/mediawiki/2015/a/ad/EPF_Lausanne_Headerbg.png') no-repeat bottom center;
 background-size: cover;
 padding: 60px 0;

} .page-h h3 { 

 font-size: 28px;
 color: #fff;
 text-transform: uppercase;
 font-weight: 600;

} .filter { 

 background: url('https://static.igem.org/mediawiki/2015/e/e6/EPF_Lausanne_Filterbg.png') no-repeat top center;
 background-size: cover;
 padding: 50px 0;
 margin-top: -60px;

} .filter ul { 

 padding: 0;
 margin: 0;
 list-style: none;

} .filter ul li { 

 display: inline-block;
 margin: 0 20px;
 color: #fff;
 cursor: pointer;

} .filter ul li.active { 

 color: #39c8e2;

} .products { 

 background: url('https://static.igem.org/mediawiki/2015/9/92/EPF_Lausanne_Productsbg.png') no-repeat top center;
 background-size: cover;
 padding: 120px 0 80px 0;
 margin-top: -40px;

} .products .thumb-p { 

 overflow: hidden;
 position: relative;
 -webkit-border-radius: 6px;
 -webkit-background-clip: padding-box;
 -moz-border-radius: 6px;
 -moz-background-clip: padding;
 border-radius: 6px;
 background-clip: padding-box;

} .products .thumb-p img { 

 width: 100%;

} .products .thumb-p .overlay-p { 

 background-color: #39c8e2;
 position: absolute;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 -webkit-border-radius: 6px;
 -webkit-background-clip: padding-box;
 -moz-border-radius: 6px;
 -moz-background-clip: padding;
 border-radius: 6px;
 background-clip: padding-box;
 -webkit-transform: scaleY(0);
 -moz-transform: scaleY(0);
 -o-transform: scaleY(0);
 -ms-transform: scaleY(0);
 transform: scaleY(0);
 -webkit-transition: all 200ms ease-in-out;
 -moz-transition: all 200ms ease-in-out;
 -o-transition: all 200ms ease-in-out;
 transition: all 200ms ease-in-out;

} .products .thumb-p .overlay-p a { 

 position: absolute;
 top: 50%;
 left: 50%;
 margin: -7px 0 0 -8px;
 font-size: 18px;
 color: #fff;

} .products .thumb-p:hover .overlay-p { 

 -webkit-transform: scaleY(1);
 -moz-transform: scaleY(1);
 -o-transform: scaleY(1);
 -ms-transform: scaleY(1);
 transform: scaleY(1);

} .products .content-p { 

 margin-bottom: 40px;

} .products .content-p h4 { 

 font-size: 16px;
 font-weight: 700;
 text-transform: uppercase;
 color: #000;
 margin: 15px 0 5px 0;

} .products .content-p span { 

 font-size: 12px;
 font-weight: 300;
 text-transform: uppercase;
 color: #000;

}

  1. Grid .mix {
 display: none;

} button.main-button, .main-button { 

 background-color: #39c8e2;
 color: #fff;
 padding: 10px 15px;
 text-transform: uppercase;
 font-weight: 700;
 outline: 0;
 border: 0;
 -webkit-border-radius: 4px;
 -webkit-background-clip: padding-box;
 -moz-border-radius: 4px;
 -moz-background-clip: padding;
 border-radius: 4px;
 background-clip: padding-box;

} .contact { 

 background: url('https://static.igem.org/mediawiki/2015/9/92/EPF_Lausanne_Contactbg.png') no-repeat top center;
 background-size: cover;
 padding: 120px 0;
 margin-top: -55px;

} .contact fieldset { 

 margin-bottom: 30px;

} .contact fieldset input, .contact fieldset textarea { 

 width: 100%;
 min-width: 100%;
 max-width: 100%;
 background: rgba(250, 250, 250, 0.7);
 border: 1px solid #999;
 color: #777;

} .contact fieldset input:focus, .contact fieldset textarea:focus { 

 border: 1px solid #39c8e2;
 outline: 0;

} .contact fieldset textarea { 

 padding: 15px;

} .page-h.promotion { 

 padding-bottom: 100px;

} .video-featured { 

 background: url('https://static.igem.org/mediawiki/2015/2/25/EPF_Lausanne_Bg1.png') no-repeat top center;
 background-size: cover;
 padding: 160px 0;
 margin-top: -130px;

} .video-featured .video-holder { 

 overflow: hidden;

} .video-featured .video-holder iframe { 

 width: 100%;

} .promotion-s { 

 background: url('https://static.igem.org/mediawiki/2015/8/8d/EPF_Lausanne_Promotionbg.png') no-repeat top center;
 background-size: cover;
 padding: 180px 0 120px 0;
 margin-top: -120px;

} .product-left { 

 color: #444444;
 padding-right: 30px;

} .product-left h3 { 

 text-transform: uppercase;
 font-size: 18px;
 font-weight: 700;

} .product-left .product-image { 

 margin-right: 15px;
 float: left;
 overflow: hidden;

} .product-content { 

 overflow: hidden;

} .product-content h3 { 

 text-transform: uppercase;
 font-size: 18px;
 font-weight: 700;

} .product-right { 

 padding-left: 30px;
 color: #fff;

} .product-right .product-image { 

 float: right;
 overflow: hidden;
 margin-left: 15px;

} /* .site-footer { 

 position: relative;
 z-index: 19;
 padding: 100px 0 40px 0;
 margin-top: -70px;
 background: url('https://static.igem.org/mediawiki/2015/a/a7/EPF_Lausanne_Footerbg.png') no-repeat top center;
 background-size: cover;

} .site-footer ul.social { 

 width: 120px;
 height: 120px;
 overflow: hidden;
 padding: 0;
 margin: 0 auto;
 list-style: none;
 position: relative;
 background: url('https://static.igem.org/mediawiki/2015/3/3d/EPF_LausanneSocialbg.png') no-repeat center;

} .site-footer ul.social li { 

 display: inline-block;
 position: absolute;

} .site-footer ul.social li a { 

 width: 32px;
 height: 32px;
 text-align: center;
 line-height: 32px;
 -webkit-border-radius: 3px;
 -webkit-background-clip: padding-box;
 -moz-border-radius: 3px;
 -moz-background-clip: padding;
 border-radius: 3px;
 background-clip: padding-box;
 color: #fff;

} .site-footer ul.social li.facebook { 

 top: 0;
 left: 46px;

} .site-footer ul.social li.facebook a { 

 background-color: #4c66a4;

} .site-footer ul.social li.twitter { 

 top: 46px;
 left: 0;

} .site-footer ul.social li.twitter a { 

 background-color: #55acee;

} .site-footer ul.social li.linkedin { 

 top: 46px;
 left: 88px;

} .site-footer ul.social li.linkedin a { 

 background-color: #006699;

} .site-footer ul.social li.rss { 

 top: 88px;
 left: 46px;

} .site-footer ul.social li.rss a { 

 background-color: #fb6405;

} .site-footer p { 

 display: block;

}*/ /* Medium devices (desktops, 992px and up) */ @media (max-width: 992px) { 

 .slider-button {
   display: none;
 }

} /* Small devices (tablets, 768px and up) */ @media (max-width: 768px) { 

 .slider-caption {
   display: none;
 }
 .first-section {
   background-position: left;
   margin-top: -20px;
 }
 .contact form {
   margin-top: 60px;
 }
 .product-left {
   color: #fff;
 }

} /* ========================================================================== 

  Media Queries
  ========================================================================== */