Difference between revisions of "Team:EPF Lausanne/Test/css/templatemo-style"

Line 1: Line 1:
−
body{background-color: blue}
+
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800);
−
nav ul ul {
+
/* ==========================================================================
−
display: none;
+
    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;
 +
  }
 +
}
 +
#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');
 +
}
 +
/* ==========================================================================
 +
  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
 +
  ========================================================================== */
 +
.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: #1eb0ca;
 +
}
 +
.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;
 +
}.navbar ul ul {
 +
  background: #5f6975; border-radius: 0px; padding: 0;
 +
  position: absolute; top: 100%;
 +
}
 +
  .navbar ul ul li {
 +
    float: none;
 +
    border-top: 1px solid #6b727c;
 +
    border-bottom: 1px solid #575f6a;
 +
    position: relative;
 +
  }
 +
    .navbar ul ul li a {
 +
      padding: 15px 40px;
 +
      color: #fff;
 +
    }
 +
      nav ul ul li a:hover {
 +
        background: #4b545f;
 +
      }
 +
.navbar ul ul {
 +
  display: none;
 
}
 
}
  
−
nav ul li:hover > ul {
+
  .navbar ul li:hover > ul {
−
display: block;
+
    display: block;
−
}
+
  }
−
nav ul {
+
.navbar ul ul {
−
background: #efefef;  
+
  background: #5f6975; border-radius: 0px; padding: 0;
−
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
+
  position: absolute; top: 100%;
−
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
+
}
−
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);  
+
  .navbar ul ul li {
−
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
+
    float: none;
−
padding: 0 20px;
+
    border-top: 1px solid #6b727c;
−
border-radius: 10px;
+
    border-bottom: 1px solid #575f6a;
−
list-style: none;
+
    position: relative;
−
position: relative;
+
  }
−
display: inline-table;
+
    .navbar ul ul li a {
 +
      padding: 15px 40px;
 +
      color: #fff;
 +
    }
 +
      .navbar ul ul li a:hover {
 +
        background: #4b545f;
 +
      }
 +
.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;
 +
}
 +
.first-section {
 +
  color: #fff;
 +
  position: relative;
 +
  z-index: 17;
 +
  padding: 80px 0;
 +
  margin-top: -86px;
 +
  background: url('https://static.igem.org/mediawiki/2015/2/25/EPF_Lausanne_Bg1.png') no-repeat top center;
 +
  background-size: cover;
 +
}
 +
.first-section h3 {
 +
  text-transform: uppercase;
 +
  font-weight: 700;
 +
  font-size: 24px;
 +
}
 +
.first-section .image-holder {
 +
  margin-top: 50px;
 +
  overflow: hidden;
 +
}
 +
.second-section {
 +
  color: #333333;
 +
  position: relative;
 +
  z-index: 18;
 +
  padding: 80px 0;
 +
  margin-top: -40px;
 +
  background: url('https://static.igem.org/mediawiki/2015/6/68/EPF_Lausanne_Bg2.png') no-repeat top center;
 +
  background-size: cover;
 +
}
 +
.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 {
 +
  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;
 +
}
 +
#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;
 
}
 
}
−
nav ul:after {
+
.site-footer p {
−
content: ""; clear: both; display: block;
+
  display: block;
−
}
+
−
nav ul li {
+
−
float: left;
+
 
}
 
}
−
nav ul li:hover {
+
/*  Medium devices (desktops, 992px and up) */
−
background: #4b545f;
+
@media (max-width: 992px) {
−
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
+
  .slider-button {
−
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
+
    display: none;
−
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
+
  }
−
}
+
−
nav ul li:hover a {
+
−
color: #fff;
+
−
}
+
−
+
−
nav ul li a {
+
−
display: block; padding: 25px 40px;
+
−
color: #757575; text-decoration: none;
+
−
}
+
−
nav ul ul {
+
−
background: #5f6975; border-radius: 0px; padding: 0;
+
−
position: absolute; top: 100%;
+
 
}
 
}
−
nav ul ul li {
+
/*  Small devices (tablets, 768px and up)  */
−
float: none;
+
@media (max-width: 768px) {
−
border-top: 1px solid #6b727c;
+
  .slider-caption {
−
border-bottom: 1px solid #575f6a;
+
    display: none;
−
position: relative;
+
  }
−
}
+
  .first-section {
−
nav ul ul li a {
+
    background-position: left;
−
padding: 15px 40px;
+
    margin-top: -20px;
−
color: #fff;
+
  }
−
}
+
  .contact form {
−
nav ul ul li a:hover {
+
    margin-top: 60px;
−
background: #4b545f;
+
  }
−
}
+
  .product-left {
−
nav ul ul ul {
+
    color: #fff;
−
position: absolute; left: 100%; top:0;
+
  }
 
}
 
}
 +
/* ==========================================================================
 +
  Media Queries
 +
  ========================================================================== */

Revision as of 09:14, 14 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
  ========================================================================== */

.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: #1eb0ca;

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

}.navbar ul ul { 

 background: #5f6975; border-radius: 0px; padding: 0;
 position: absolute; top: 100%;

} 

 .navbar ul ul li {
   float: none; 
   border-top: 1px solid #6b727c;
   border-bottom: 1px solid #575f6a;
   position: relative;
 }
   .navbar ul ul li a {
     padding: 15px 40px;
     color: #fff;
   } 
     nav ul ul li a:hover {
       background: #4b545f;
     }

.navbar ul ul { 

 display: none;

} 

 .navbar ul li:hover > ul {
   display: block;
 }

.navbar ul ul { 

 background: #5f6975; border-radius: 0px; padding: 0;
 position: absolute; top: 100%;

} 

 .navbar ul ul li {
   float: none; 
   border-top: 1px solid #6b727c;
   border-bottom: 1px solid #575f6a;
   position: relative;
 }
   .navbar ul ul li a {
     padding: 15px 40px;
     color: #fff;
   } 
     .navbar ul ul li a:hover {
       background: #4b545f;
     }

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

} .first-section { 

 color: #fff;
 position: relative;
 z-index: 17;
 padding: 80px 0;
 margin-top: -86px;
 background: url('https://static.igem.org/mediawiki/2015/2/25/EPF_Lausanne_Bg1.png') no-repeat top center;
 background-size: cover;

} .first-section h3 { 

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

} .first-section .image-holder { 

 margin-top: 50px;
 overflow: hidden;

} .second-section { 

 color: #333333;
 position: relative;
 z-index: 18;
 padding: 80px 0;
 margin-top: -40px;
 background: url('https://static.igem.org/mediawiki/2015/6/68/EPF_Lausanne_Bg2.png') no-repeat top center;
 background-size: cover;

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

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