Difference between revisions of "Team:EPF Lausanne/Team/Meet"

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,
 +
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;
 +
  }
 +
}
 +
#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;
 +
}
 +
#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');
 +
}
 +
/* ==========================================================================
 +
  Timeline
 +
  ========================================================================== */
  
−
   #contentSub, #footer-box, #catlinks, #search-controls,
+
.timeline {
−
   #p-logo, .printfooter, .firstHeading, .visualClear {
+
   list-style: none;
−
      display: none;
+
  padding: 20px 0 20px;
 +
  position: relative;
 +
}
 +
.timeline:before {
 +
  top: 0;
 +
  bottom: 0;
 +
  position: absolute;
 +
  content: " ";
 +
  width: 3px;
 +
  background-color: #333333;
 +
  left: 50%;
 +
  margin-left: -1.5px;
 +
}
 +
.timeline > li {
 +
  margin-bottom: 20px;
 +
  position: relative;
 +
}
 +
.timeline > li:before,
 +
.timeline > li:after {
 +
  content: " ";
 +
  display: table;
 +
}
 +
.timeline > li:after {
 +
  clear: both;
 +
}
 +
.timeline > li:before,
 +
.timeline > li:after {
 +
  content: " ";
 +
  display: table;
 +
}
 +
.timeline > li:after {
 +
  clear: both;
 +
}
 +
.timeline > li > .timeline-panel {
 +
  width: 46%;
 +
  float: left;
 +
  border: 1px solid #333333;
 +
  border-radius: 2px;
 +
  padding: 20px;
 +
  position: relative;
 +
  -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
 +
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
 +
}
 +
.timeline > li > .timeline-panel:before {
 +
   position: absolute;
 +
  top: 26px;
 +
  right: -15px;
 +
  display: inline-block;
 +
  border-top: 15px solid transparent;
 +
  border-left: 15px solid #ccc;
 +
  border-right: 0 solid #ccc;
 +
  border-bottom: 15px solid transparent;
 +
  content: " ";
 +
}
 +
.timeline > li > .timeline-panel:after {
 +
  position: absolute;
 +
  top: 27px;
 +
  right: -14px;
 +
  display: inline-block;
 +
  border-top: 14px solid transparent;
 +
  border-left: 14px solid #fff;
 +
  border-right: 0 solid #fff;
 +
  border-bottom: 14px solid transparent;
 +
  content: " ";
 +
}
 +
.timeline > li > .timeline-badge {
 +
  color: #fff;
 +
  width: 25px;
 +
  height: 25px;
 +
  line-height: 50px;
 +
  font-size: 2.5em;
 +
  text-align: center;
 +
  position: absolute;
 +
  top: 29px;
 +
  left: 50%;
 +
  margin-left: -12.5px;
 +
  background-color: #999999;
 +
  z-index: 100;
 +
  border-top-right-radius: 50%;
 +
  border-top-left-radius: 50%;
 +
  border-bottom-right-radius: 50%;
 +
  border-bottom-left-radius: 50%;
 +
}
 +
.timeline > li.timeline-inverted > .timeline-panel {
 +
  float: right;
 +
}
 +
.timeline > li.timeline-inverted > .timeline-panel:before {
 +
  border-left-width: 0;
 +
  border-right-width: 15px;
 +
  left: -15px;
 +
  right: auto;
 +
}
 +
.timeline > li.timeline-inverted > .timeline-panel:after {
 +
  border-left-width: 0;
 +
  border-right-width: 14px;
 +
  left: -14px;
 +
  right: auto;
 +
}
 +
.timeline-badge.primary {
 +
  background-color: #2e6da4 !important;
 +
}
 +
.timeline-badge.success {
 +
  background-color: #3f903f !important;
 +
}
 +
.timeline-badge.warning {
 +
  background-color: #f0ad4e !important;
 +
}
 +
.timeline-badge.danger {
 +
  background-color: #d9534f !important;
 +
}
 +
.timeline-badge.info {
 +
  background-color: #5bc0de !important;
 +
}
 +
.timeline-title {
 +
  font-size: 28px;
 +
  margin-top: 0;
 +
  color: inherit;
 +
}
 +
.timeline-body > p,
 +
.timeline-body > ul {
 +
  margin-bottom: 0;
 +
}
 +
.timeline-body > p + p {
 +
  margin-top: 5px;
 +
}
 +
/* ==========================================================================
 +
  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;
 
   }
 
   }
−
   #globalWrapper, #content {  
+
   h2,
−
     width: 100%;
+
  h3 {
−
    height: 100%;
+
     page-break-after: avoid;
−
    border: 0px;
+
−
    background-color: #161BFB;
+
−
    margin: 0px;
+
−
    padding: 0px;
+
−
    font-size: 100%;
+
 
   }
 
   }
−
img.resize50{
 
−
  max-width:50%;
 
−
  max-height:50%;
 
 
}
 
}
 +
/* ==========================================================================
 +
  Sidebar
 +
  ========================================================================== */
  
−
img.resize30{
+
@media (min-width: 979px) {
−
     max-width:30%;
+
  #sidebar.affix-top {
−
     max-height:30%;
+
     position: static;
 +
    margin-top:30px;
 +
    width:228px;
 +
  }
 +
 
 +
  #sidebar.affix {
 +
     position: fixed;
 +
    top:70px;
 +
    width:228px;
 +
  }
 
}
 
}
−
</style>
 
−
    <!--
 
−
    Stone Template
 
−
    http://www.templatemo.com/preview/templatemo_452_stone
 
−
    -->
 
  
−
    <!-- Latest compiled and minified CSS -->
+
#sidebar li.active {
−
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
+
  border:0 #eee solid;
−
   
+
  border-right-width:5px;
−
    <!-- Bootstrap Stylesheet -->
+
}
−
    <link rel="stylesheet" href="https://2015.igem.org/Team:EPF_Lausanne/Test/css/bootstrap?action=raw&amp;ctype=text/css" type="text/css">
+
/* hide sidebar sub menus by default */
−
   
+
#sidebar.nav .nav {
−
    <!-- FontAwesome Icons -->
+
  display: none;
−
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
+
     font-size:12px;
−
   
+
}
−
     <!-- Normailize Stylesheet -->
+
−
    <link rel="stylesheet" href="https://2015.igem.org/Team:EPF_Lausanne/Test/css/normalize?action=raw&amp;ctype=text/css" type="text/css">
+
  
−
    <!-- Main Styles -->
+
/* show sub menu when parent is active */
−
     <link rel="stylesheet" href="https://2015.igem.org/Team:EPF_Lausanne/Test/css/templatemo-style?action=raw&amp;ctype=text/css" type="text/css">
+
#sidebar.nav>.active>ul {
 +
  display: block;
 +
}
 +
/* ==========================================================================
 +
     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
 +
  ========================================================================== */
  
−
    <!-- Footer -->
+
.dropdown:hover .dropdown-menu {
−
    <link rel="stylesheet" href="https://2015.igem.org/Team:EPF_Lausanne/css/footer?action=raw&amp;ctype=text/css" type="text/css">
+
display: block;
−
 
+
}
−
    <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;
−
    <div class="site-header">
+
  color: #39c8e2;
−
        <div class="container">
+
  margin-top: 18px;
−
            <div class="row">
+
  -webkit-border-radius: 0;
−
                <nav class="navbar navbar-default navbar-static-top">
+
  -webkit-background-clip: padding-box;
−
                    <div class="navbar-header">
+
  -moz-border-radius: 0;
−
                        <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#main-menu">
+
  -moz-background-clip: padding;
−
                            <span class="sr-only">Toggle navigation</span>
+
  border-radius: 0;
−
                            <i class="fa fa-bars"></i>
+
  background-clip: padding-box;
−
                        </button>
+
}
−
                        <!--<a class="navbar-brand" href="https://2015.igem.org/Team:EPF_Lausanne">Bio Logic</a>-->
+
.navbar-default .navbar-toggle:hover,
−
                        <a href="https://2015.igem.org/Team:EPF_Lausanne"><img src="https://static.igem.org/mediawiki/2015/9/95/EPF_Lausanne_BIOLOGIC_BLANC.png"></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/Background">Background</a></li>
+
.navbar-default {
−
                                <li><a href="https://2015.igem.org/Team:EPF_Lausanne/Project/Description">Description</a></li>
+
  background-color: transparent;
−
                                <li><a href="https://2015.igem.org/Team:EPF_Lausanne/Project/Applications">Applications</a></li>
+
  border-color: transparent;
−
                                <li><a href="https://2015.igem.org/Team:EPF_Lausanne/Project/Modelling">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="https://2015.igem.org/Team:EPF_Lausanne/Achievements/Vivo">In vivo</a></li>
+
  text-transform: uppercase;
−
                                <li><a href="https://2015.igem.org/Team:EPF_Lausanne/Achievements/Silico">In silico</a></li>
+
  font-size: 14px;
−
                                <li><a href="https://2015.igem.org/Team:EPF_Lausanne/Achievements/Judging">Judging</a></li>
+
}
−
                                <li><a href="https://2015.igem.org/Team:EPF_Lausanne/Achievements/Parts">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 #ffffff;
−
                            <ul class="dropdown-menu">
+
  padding: 10px;
−
                                <li><a href="https://2015.igem.org/Team:EPF_Lausanne/Policy/Ethic">Ethics</a></li>
+
}
−
                                <li><a href="https://2015.igem.org/Team:EPF_Lausanne/Policy/Safety">Safety</a></li>
+
.navbar-default .navbar-nav > li:first-child {
−
                                <li><a href="https://2015.igem.org/Team:EPF_Lausanne/Policy/Human">Human Practices</a></li>
+
  border-left: 1px solid #ffffff;
−
                            </ul>
+
}
−
                            </li>
+
.navbar-default .navbar-brand {
−
                            <li class="dropdown">
+
  text-transform: uppercase;
−
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Notebook <span class="caret"></span></a>
+
  font-size: 32px;
−
                            <ul class="dropdown-menu">
+
  font-weight: 700;
−
                                <li><a href="https://2015.igem.org/Team:EPF_Lausanne/Notebook/Ecoli">E. Coli</a></li>
+
  color: #fff;
−
                                <li><a href="https://2015.igem.org/Team:EPF_Lausanne/Notebook/Yeast">Yeast</a></li>
+
  padding-top: 25px;
−
                                <li><a href="https://2015.igem.org/Team:EPF_Lausanne/Notebook/Protocols">Protocols</a></li>
+
  padding-bottom: 25px;
−
                            </ul>
+
}
−
                            </li>
+
.navbar-default .navbar-brand:hover {
−
                            <li class="dropdown">
+
  color: #fff;
−
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Team <span class="caret"></span></a>
+
}
−
                            <ul class="dropdown-menu">
+
.site-header {
−
                                <li><a href="https://2015.igem.org/Team:EPF_Lausanne/Team/Meet">Meet us</a></li>
+
  background-color: #161BFB;
−
                                <li><a href="https://2015.igem.org/Team:EPF_Lausanne/Timeline">Timeline</a></li>
+
  color: #ffffff;
−
                                <li><a href="https://2015.igem.org/Team:EPF_Lausanne/Team/Aknowledgements">Aknowledgements</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);
−
    <div class="page-h promotion">
+
  position: absolute;
−
        <div class="container">
+
  width: 100%;
−
            <div class="row">
+
  height: 100%;
−
                <div class="col-md-12 text-center">
+
  top: 0;
−
                    <h3>Timeline</h3>
+
  left: 0;
−
                </div>
+
  z-index: 9;
−
            </div>
+
}
−
        </div>
+
.site-slider .slider-caption {
−
    </div>
+
  position: absolute;
−
 
+
  z-index: 12;
−
    <div class="meet-section">
+
  width: 100%;
−
        <div class="container">
+
  top: 30%;
−
            <div class="row">
+
  text-align: center;
−
                <div class="col-md-4 text-center">
+
}
−
                    <img class="img-circle center" src="https://static.igem.org/mediawiki/2015/2/29/EPF_Lausanne_Monkey.jpg">
+
.site-slider .slider-caption .title {
−
                    <h1>Monkey</h1>
+
  width: 276px;
−
                    <h2>"Banana, Banana, banana<br>"Banana Banana</h2>
+
  margin: 0 auto;
−
                </div>
+
  border: 4px solid #fff;
−
            </div>
+
  padding: 40px 40px 20px 40px;
−
        </div>
+
  text-align: center;
−
    </div>
+
}
−
    <div class="fourth-section">
+
.site-slider .slider-caption .title h2 {
−
        <div class="container">
+
  margin: 0 0 20px 0;
−
            <div class="row">
+
  font-size: 28px;
−
                <div class="col-md-12 text-center">
+
  color: #fff;
−
                    <h2>Still under construction</h2>
+
  text-transform: uppercase;
−
                </div>
+
  font-weight: 700;
−
            </div>
+
}
−
        </div>
+
.site-slider .slider-caption .slider-button {
−
    </div>
+
  color: #fff;
−
    <footer class="footer-distributed">
+
  margin: 0 0 20px 0;
−
 
+
  font-size: 28px;
−
            <div class="footer-left">
+
  display: inline-block;
−
 
+
  border: 2px solid #fff;
−
                <img class="resize50" src="https://static.igem.org/mediawiki/2015/4/4e/EPF_Lausanne_iGem_Logo_Blue.png" alt="">
+
  padding: 40px 40px 20px 40px;
−
 
+
  text-transform: uppercase;
−
            </div>
+
  font-weight: 700;
−
 
+
  -webkit-border-radius: 3px;
−
            <div class="footer-center">
+
  -webkit-background-clip: padding-box;
−
 
+
  -moz-border-radius: 3px;
−
                <div>
+
  -moz-background-clip: padding;
−
                    <i class="fa fa-map-marker"></i>
+
  border-radius: 3px;
−
                    <p><span>Route Cantonale</span> Lausanne, Suisse</p>
+
  background-clip: padding-box;
−
                </div>
+
}
−
 
+
.col-centered{
−
                <div>
+
    float: none;
−
                    <i class="fa fa-envelope"></i>
+
    margin: 0 auto;
−
                    <p><a href="mailto:iGEM2015dreamteam@groupes.epfl.ch">Contact us</a></p>
+
}
−
                </div>
+
.first-section {
−
 
+
  color: #333333;
−
            </div>
+
  position: relative;
−
 
+
  z-index: 17;
−
            <div class="footer-right">
+
  padding: 20px 0;
−
 
+
  margin-top: -86px;
−
                <p class="footer-company-about">
+
  background-color: #EBEBEB;
−
                    <span>About us</span>
+
  background-size: cover;
−
                    Team of a dozen biotechnology students that will attempt to change the world
+
}
−
                </p>
+
.first-section h3 {
−
 
+
  text-align: center;
−
                <div class="footer-icons">
+
  text-transform: uppercase;
−
 
+
  font-weight: 500;
−
                    <a href="https://www.facebook.com/pages/IGEM-EPFL-2015/1598472927106907" target="_blank"><i class="fa fa-facebook"></i></a>
+
  font-size: 24px;
−
                    <a href="https://instagram.com/igem2015epfl/" target="_blank"><i class="fa fa-instagram"></i></a>
+
  color: #000066;
−
                    <a href="https://twitter.com/EPFL_iGEM/" target="_blank"><i class="fa fa-twitter"></i></a>
+
}
−
                </div>
+
.first-section h2 {
−
 
+
  text-align: center;
−
            </div>
+
  color: #333333;
−
 
+
  font-weight: 400;
−
        </footer>
+
  margin: 0;
−
 
+
}
−
    <script src="https://2015.igem.org/Team:EPF_Lausanne/Test/js/jquery?action=raw&amp;ctype=text/js"></script>
+
.first-section h4 {
−
    <script src="https://2015.igem.org/Team:EPF_Lausanne/Test/js/bootstrap?action=raw&amp;ctype=text/js"></script>
+
  font-size: 16px;
−
     <script src="https://2015.igem.org/Team:EPF_Lausanne/Test/js/plugins?action=raw&amp;ctype=text/js"></script>
+
  font-weight: 600;
−
     <script src="https://2015.igem.org/Team:EPF_Lausanne/Test/js/main?action=raw&amp;ctype=text/js"></script>    
+
}
−
   
+
.first-section p {
−
</body>
+
  text-align: justify;
−
</html>
+
  font-size: 16px;
 +
  color : #2F2F2F;
 +
}
 +
.first-section .image-holder {
 +
  margin-top: 50px;
 +
  overflow: hidden;
 +
}
 +
.meet-section {
 +
  color: #333333;
 +
  position: relative;
 +
  z-index: 18;
 +
  padding: 40px;
 +
  padding-bottom: 100px;
 +
  margin-top: -40px;
 +
  background-color: #EBEBEB;
 +
}
 +
.meet-section h4 {
 +
  text-align: center;
 +
  color: #333333;
 +
  font-size: 18px;
 +
}
 +
.meet-section p {
 +
  font-style: italic;
 +
  text-align: center;
 +
  color: #333333;
 +
  font-size: 16px;
 +
}
 +
.second-section {
 +
  color: #333333;
 +
  position: relative;
 +
  z-index: 18;
 +
  padding: 40px;
 +
  padding-bottom: 100px;
 +
  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 {
 +
  text-align: justify;
 +
  font-size: 16px;
 +
  color : #2F2F2F;
 +
}
 +
.second-section .col-md-3 {
 +
  margin-top: 50px;
 +
}
 +
.second-section h4 {
 +
  text-align: center;
 +
  font-size: 16px;
 +
  font-weight: 600;
 +
}
 +
.second-section h5 {
 +
  font-size: 14;
 +
  text-align: center;
 +
  font-style: italic;
 +
}
 +
.second-section img {
 +
  margin: 0 auto;
 +
}
 +
.second-section .image-holder {
 +
  margin-top: 50px;
 +
  overflow: hidden;
 +
}
 +
.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;
 +
  background-color: #EBEBEB;
 +
}
 +
.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;
 +
}
 +
.whitebg {
 +
padding: 20px;
 +
text-align: justify;
 +
padding-top: 30px;
 +
box-shadow: 2px 2px 1px #888888;
 +
background-color: white;
 +
}
 +
.whitebg a.btn-primary {
 +
color: white !important;
 +
}
 +
.whitebg a.btn-primary:hover {
 +
color: white !important;
 +
}
 +
.whitebg blockquote.blockquote-reverse {
 +
  padding-right: 15px;
 +
  padding-left: 0;
 +
  margin-top: 40px;
 +
  margin-bottom: 40px;
 +
  text-align: right;
 +
  border-right: 5px solid #39484B;
 +
  border-left: 0;
 +
  background-color: #f4f4f4;
 +
  box-shadow: 10px 10px 20px #bbb;
 +
}
 +
.whitebg blockquote.blockquote {
 +
  padding-left: 15px;
 +
  padding-right: 0;
 +
  margin-top: 40px;
 +
  margin-bottom: 40px;
 +
  text-align: left;
 +
  border-left: 5px solid #39484B;
 +
  border-right: 0;
 +
  background-color: #f4f4f4;
 +
  box-shadow: 10px 10px 20px #bbb;
 +
}
 +
.whitebg ul li {
 +
  font-size: 18px !important;
 +
  font-weight: 300;
 +
  line-height: 1.4;
 +
}
 +
.whitebg a, .whitebg a:visited, .whitebg a:active {
 +
  color: #649CD2 !important;
 +
}
 +
.whitebg a:hover {
 +
  color: #A5D2DA !important;
 +
}
 +
.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;
 +
}
 +
.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 12:49, 21 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');

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

  Timeline
  ========================================================================== */

.timeline { 

 list-style: none;
 padding: 20px 0 20px;
 position: relative;

} .timeline:before { 

 top: 0;
 bottom: 0;
 position: absolute;
 content: " ";
 width: 3px;
 background-color: #333333;
 left: 50%;
 margin-left: -1.5px;

} .timeline > li { 

 margin-bottom: 20px;
 position: relative;

} .timeline > li:before, .timeline > li:after { 

 content: " ";
 display: table;

} .timeline > li:after { 

 clear: both;

} .timeline > li:before, .timeline > li:after { 

 content: " ";
 display: table;

} .timeline > li:after { 

 clear: both;

} .timeline > li > .timeline-panel { 

 width: 46%;
 float: left;
 border: 1px solid #333333;
 border-radius: 2px;
 padding: 20px;
 position: relative;
 -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
 box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);

} .timeline > li > .timeline-panel:before { 

 position: absolute;
 top: 26px;
 right: -15px;
 display: inline-block;
 border-top: 15px solid transparent;
 border-left: 15px solid #ccc;
 border-right: 0 solid #ccc;
 border-bottom: 15px solid transparent;
 content: " ";

} .timeline > li > .timeline-panel:after { 

 position: absolute;
 top: 27px;
 right: -14px;
 display: inline-block;
 border-top: 14px solid transparent;
 border-left: 14px solid #fff;
 border-right: 0 solid #fff;
 border-bottom: 14px solid transparent;
 content: " ";

} .timeline > li > .timeline-badge { 

 color: #fff;
 width: 25px;
 height: 25px;
 line-height: 50px;
 font-size: 2.5em;
 text-align: center;
 position: absolute;
 top: 29px;
 left: 50%;
 margin-left: -12.5px;
 background-color: #999999;
 z-index: 100;
 border-top-right-radius: 50%;
 border-top-left-radius: 50%;
 border-bottom-right-radius: 50%;
 border-bottom-left-radius: 50%;

} .timeline > li.timeline-inverted > .timeline-panel { 

 float: right;

} .timeline > li.timeline-inverted > .timeline-panel:before { 

 border-left-width: 0;
 border-right-width: 15px;
 left: -15px;
 right: auto;

} .timeline > li.timeline-inverted > .timeline-panel:after { 

 border-left-width: 0;
 border-right-width: 14px;
 left: -14px;
 right: auto;

} .timeline-badge.primary { 

 background-color: #2e6da4 !important;

} .timeline-badge.success { 

 background-color: #3f903f !important;

} .timeline-badge.warning { 

 background-color: #f0ad4e !important;

} .timeline-badge.danger { 

 background-color: #d9534f !important;

} .timeline-badge.info { 

 background-color: #5bc0de !important;

} .timeline-title { 

 font-size: 28px;
 margin-top: 0;
 color: inherit;

} .timeline-body > p, .timeline-body > ul { 

 margin-bottom: 0;

} .timeline-body > p + p { 

 margin-top: 5px;

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

  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;
 }

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

  Sidebar
  ========================================================================== */

@media (min-width: 979px) { 

 #sidebar.affix-top {
   position: static;
   margin-top:30px;
   width:228px;
 }
 
 #sidebar.affix {
   position: fixed;
   top:70px;
   width:228px;
 }

}

  1. sidebar li.active {
 border:0 #eee solid;
 border-right-width:5px;

} /* hide sidebar sub menus by default */

  1. sidebar.nav .nav {
 display: none;
   font-size:12px;

}

/* show sub menu when parent is active */

  1. sidebar.nav>.active>ul {
 display: block;

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

   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 #ffffff;
 padding: 10px;

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

 border-left: 1px solid #ffffff;

} .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: #161BFB;
 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: 0 0 20px 0;
 font-size: 28px;
 display: inline-block;
 border: 2px solid #fff;
 padding: 40px 40px 20px 40px;
 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: #333333;
 position: relative;
 z-index: 17;
 padding: 20px 0;
 margin-top: -86px;
 background-color: #EBEBEB;
 background-size: cover;

} .first-section h3 { 

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

} .first-section h2 { 

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

} .first-section h4 { 

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

} .first-section p { 

 text-align: justify;
 font-size: 16px; 
 color : #2F2F2F;

} .first-section .image-holder { 

 margin-top: 50px;
 overflow: hidden;

} .meet-section { 

 color: #333333;
 position: relative;
 z-index: 18;
 padding: 40px;
 padding-bottom: 100px;
 margin-top: -40px;
 background-color: #EBEBEB;

} .meet-section h4 { 

 text-align: center;
 color: #333333;
 font-size: 18px;

} .meet-section p { 

 font-style: italic;
 text-align: center;
 color: #333333;
 font-size: 16px;

} .second-section { 

 color: #333333;
 position: relative;
 z-index: 18;
 padding: 40px;
 padding-bottom: 100px;
 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 { 

 text-align: justify;
 font-size: 16px; 
 color : #2F2F2F;

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

 margin-top: 50px;

} .second-section h4 { 

 text-align: center;
 font-size: 16px;
 font-weight: 600;

} .second-section h5 { 

 font-size: 14;
 text-align: center;
 font-style: italic;

} .second-section img { 

 margin: 0 auto;

} .second-section .image-holder { 

 margin-top: 50px;
 overflow: hidden;

} .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;
 background-color: #EBEBEB;

} .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;

} .whitebg { padding: 20px; text-align: justify; padding-top: 30px; box-shadow: 2px 2px 1px #888888; background-color: white; } .whitebg a.btn-primary { color: white !important; } .whitebg a.btn-primary:hover { color: white !important; } .whitebg blockquote.blockquote-reverse { 

 padding-right: 15px;
 padding-left: 0;
 margin-top: 40px;
 margin-bottom: 40px;
 text-align: right;
 border-right: 5px solid #39484B;
 border-left: 0;
 background-color: #f4f4f4;
 box-shadow: 10px 10px 20px #bbb;

} .whitebg blockquote.blockquote { 

 padding-left: 15px;
 padding-right: 0;
 margin-top: 40px;
 margin-bottom: 40px;
 text-align: left;
 border-left: 5px solid #39484B;
 border-right: 0;
 background-color: #f4f4f4;
 box-shadow: 10px 10px 20px #bbb;

} .whitebg ul li { 

 font-size: 18px !important;
 font-weight: 300;
 line-height: 1.4;

} .whitebg a, .whitebg a:visited, .whitebg a:active { 

 color: #649CD2 !important;

} .whitebg a:hover { 

 color: #A5D2DA !important;

} .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;

} .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
  ========================================================================== */