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

Revision as of 12:57, 10 August 2015 (view source) Awowen (Talk | contribs) ← Older edit		Revision as of 14:28, 10 August 2015 (view source) Awowen (Talk | contribs) Newer edit →
Line 851:		Line 851:
	position: relative;		position: relative;
	z-index: 16;		z-index: 16;
		+	background-color: #FFFFFF;
	}		}
	.site-slider .slide {		.site-slider .slide {
Line 866:		Line 867:
	left: 0;		left: 0;
	z-index: 9;		z-index: 9;
−	border-style: none;	+	border-style: none;
	}		}
	.site-slider .slider-caption {		.site-slider .slider-caption {
Line 894:		Line 895:
	font-size: 28px;		font-size: 28px;
	display: inline-block;		display: inline-block;
−	border: 2px solid #fff;
	padding: 40px 40px 20px 40px;		padding: 40px 40px 20px 40px;
	text-transform: uppercase;		text-transform: uppercase;
Line 905:		Line 905:
	background-clip: padding-box;		background-clip: padding-box;
	}		}
		+
	.col-centered{		.col-centered{
	float: none;		float: none;
Line 1,408:		Line 1,409:
	overflow: hidden;		overflow: hidden;
	margin-left: 15px;		margin-left: 15px;
		+	}
		+	.fa-arrow-circle-down {
		+	color: black;
	}		}
	/*		/*

---

Revision as of 14:28, 10 August 2015

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

/* get rid of black border.. */

1. top_menu_under {

   border-style: 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;
 padding-top: 0px;
 border-style: none;

}

@media (max-width: 979px) {

 body {
   padding-top: 0px;
 border-style: none;
 }

}

-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() 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: 0;
 -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');

}

1. contactSection{ background:#3b3b3b; text-align:center; padding:70px 0 0;}
2. contactSection .span8{ float:none; margin:0 auto;}
3. contactSection h1{ text-transform:uppercase; color:#fff; padding:0;font-size:60px;}
4. applications h1.cntr { text-transform:uppercase; color:#3A494C; padding:0;font-size:60px; text-align: center; margin-bottom: 20px; }

1. contactSection p {

   color: #fff;
   font-size: 19px;
   line-height: 27px;
 margin: 15px 0;

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

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

}

/* ==========================================================================

   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;
 min-width: 100%;

}

.navbar {

 padding-top: 15px;
 margin-bottom: 0;
 background-color: #119799;
 /*background: linear-gradient(#119799 97%, rgba(235, 235, 235,0.3)); */
 border-style: none;

}

.navbar-nav {

 margin: 0 auto;
 display: table;
 table-layout: auto;
 float: none;
 width: 100%;
 border-style: none;

}

.navbar-nav > li {

 display: table-cell;
 float: none;
 text-align: center;
 vertical-align: middle;
 color: #ffffff;
 width : 230px;

}

.navbar-nav > li > a {

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

}

.navbar-nav > li > a:hover {

 color: #fff;
 background-color: #74C1C2;

}

.navbar .nav > li.dropdown.open.active{

 color: red;
 background: blue;

} .fill-width.dropdown {

 position: static;    

} .fill-width.dropdown > .dropdown-menu {

 left: auto;

} .fill-width.dropdown > .dropdown-menu > li > a {

 white-space: normal; 

}

.navbar-default .navbar-toggle {

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

} .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;
display:table;
width:100%;

} .navbar-default {

 background-color: #119799;
 border-color: transparent;

} .navbar-header {

 padding-top: 15px;
 padding-bottom: 15px;

}

.navbar-default .navbar-nav > li {

   display:table-cell;
   text-align:center;

}

.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-top: 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: #119799;
 color: #ffffff;
 border-style: none;

} .site-slider {

 position: relative;
 z-index: 16;
 background-color: #FFFFFF;

} .site-slider .slide {

 position: relative;

} .site-slider .overlay {

 background: -webkit-linear-gradient(rgba(0,0,0,0) 90%, rgba(235, 235, 235,1)); /* For Safari 5.1 to 6.0 */
 background: -o-linear-gradient(rgba(0,0,0,0) 90%, rgba(235, 235, 235,1)); /* For Opera 11.1 to 12.0 */
 background: -moz-linear-gradient(rgba(0,0,0,0) 90%, rgba(235, 235, 235,1)); /* For Firefox 3.6 to 15 */
 background: linear-gradient(rgba(0,0,0,0) 90%, rgba(235, 235, 235,1)); /* Standard syntax */
 position: absolute;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 z-index: 9;
 border-style: none;

} .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;
 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: transparent;
 position: relative;
 z-index: 17;
 padding-top: 40px 0;
 margin-top: -86px;
 background-color: transparent;
 background-size: cover;
 border-style: none;

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

} .prot-section {

 color: #333333;
 position: relative;
 z-index: 17;
 padding: 20px 0;
 margin-top: -86px;
 padding-bottom: 50px;
 background-color: #EBEBEB;
 background-size: cover;

} .prot-section h1 {

 text-align: center;
 text-transform: uppercase;
 font-weight: 600;
 font-size: 26;
 font-color: #00003D;

} .prot-section h3 {

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

} .prot-section h2 {

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

} .prot-section h4 {

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

} .prot-section p {

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

} .prot-section .panel {

 color: #333;
 background-color: white;
 border-color: #ddd;

} .prot-section .panel p {

 margin-left: 5px;
 margin-right: 5px;

} .Notebook-section {

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

} .Notebook-section h2 {

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

} .Notebook-section h4 {

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

} .Notebook-section p {

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

} .second-section {

 color: #333333;
 position: relative;
 z-index: 18;
 padding: 0px;
 padding-bottom: 100px;
 margin-top: -40px;
 background-color: #FFFFFF;
 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;

} .sponsors {

 color: #fff;
 position: relative;
 z-index: 19;
 padding: 10px 0;
 margin-top: -50px;
 background-size: cover;
 background-color: #404040;

} .sponsors h1 {

 font-size: 28px;
 text-transform: uppercase;
 text-align: center;
 font-weight: 500

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

} .fa-arrow-circle-down {

 color: black;

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

ul.affix {

 position: fixed;
 top: 20px;
 width: 25%;
 margin-right: 30px;

}

ul.affix-top {

 position: static;

}

ul.affix-bottom {

 width: inherit;
 position: absolute;
 top: auto;

}

/* First level of nav */ .sidenav {

 margin-bottom: 30px;
 padding-top:    10px;
 padding-bottom: 10px;
 border-radius: 5px;

}

/* All levels of nav */ .sidebar .nav > li > a {

 display: block;
 color: #3A494C;
 padding: 5px 20px;

}

.sidebar .nav > li > a:hover, .sidebar .nav > li > a:focus {

 text-decoration: none;
 background-color: #e5e3e9; 
 border-left: 3px solid #A5D2DA;
 font-weight: bold;

} .sidebar .nav > .active > a, .sidebar .nav > .active:hover > a, .sidebar .nav > .active:focus > a {

 font-weight: bold;
 color: #3A494C;
 background-color: transparent;
 border-left: 3px solid #A5D2DA;

}

/* Nav: second level */ .sidebar .nav .nav {

 margin-bottom: 8px;

}

.sidebar .nav li a {

 font-size: 100%;

}

.sidebar .nav .nav > li > a {

 padding-top:    3px;
 padding-bottom: 3px;
 padding-left: 30px;
 font-size: 90%;

}

.fader {

 position: relative;
 height: 240px;
 width: 240px;
 margin-right: auto;
 margin-left: auto;

}

.fader a:last-child img {

 position: absolute;
 top: 0; 
 left: 0;
 display: none;
 height: 240px;
 width: 240px;

}

1. affix-nav li {

 display: block;

}

.navbar {

  -webkit-backface-visibility: hidden;

}

label {

 display: inline;

}

.regular-checkbox {

 display: none;

}

.regular-checkbox + label {

 background-color: #fafafa;
 border: 1px solid #cacece;
 box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
 padding: 9px;
 border-radius: 3px;
 display: inline-block;
 position: relative;

}

.regular-checkbox + label:active, .regular-checkbox:checked + label:active {

 box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);

}

.regular-checkbox:checked + label {

 background-color: #e9ecee;
 border: 1px solid #adb8c0;
 box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
 color: #99a1a7;

}

.regular-checkbox:checked + label:after {

 content: '\2714';
 font-size: 14px;
 position: absolute;
 top: 0px;
 left: 3px;
 color: #99a1a7;

}

.big-checkbox + label {

 padding: 18px;

}

.big-checkbox:checked + label:after {

 font-size: 28px;
 left: 6px;

}

/* =========================== */ .gradImg {

 background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%);
 z-index: 10;

}