Team:EPF Lausanne/Ari/css/main
@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; }
}
- 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() 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');
}
- contactSection{ background:#3b3b3b; text-align:center; padding:70px 0 0;}
- contactSection .span8{ float:none; margin:0 auto;}
- contactSection h1{ text-transform:uppercase; color:#fff; padding:0;font-size:60px;}
- applications h1.cntr { text-transform:uppercase; color:#3A494C; padding:0;font-size:60px; text-align: center; margin-bottom: 20px; }
- 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; }
.navbar {
padding-top: 15px; margin-bottom: 0; background-color: #119799;
}
.navbar-fixed-top {
margin-bottom: 0; background-color: #119799;
}
.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;
} .navbar-default {
background-color: #119799; border-color: transparent;
} .navbar-header {
padding-top: 15px; 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 {
7* 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;
} .site-slider {
position: relative; z-index: 16;
} .site-slider .slide {
position: relative;
} .site-slider .overlay {
background-color: rgba(0,0,0,0.5); 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: transparent; position: relative; z-index: 17; padding: 20px 0; margin-top: -86px; background-color: transparent; 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;
} .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: 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;
} .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;
}
- 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 ========================================================================== */
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;
}
- 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;
}