"

From 2014.igem.org

/*-- Author: W3layouts Author URL: http://w3layouts.com License: Creative Commons Attribution 3.0 Unported License URL: http://creativecommons.org/licenses/by/3.0/ --*/ html, body{

 	 font-family: 'Lato', sans-serif;
        font-size: 100%;

} body a{ transition:0.5s all; -webkit-transition:0.5s all; -moz-transition:0.5s all; -o-transition:0.5s all; -ms-transition:0.5s all; }

/*-- Portfolio Starts Here --*/

1. portfolio {

padding-top: 3em;

} .head-section span1 { height: 1px; width: 29%; background: #F5D74D; display: inline-block; } .head-section h3 { color: #000; font-weight: 700; font-size: 2.1em; text-align: center; letter-spacing: 1px; font-family: 'Oswald', serif; margin-bottom: 5px; } .head-section p{ font-weight: 300; line-height: 1.2em; color: #77F7AA; font-size: 1.4em; margin: 0.4em auto; text-align: center; width: 67%; padding: 0.5em 0 1em; } /* Styles the thumbnail */ /*Eliminates padding, centers the thumbnail */

a.lightbox img { width:100%; box-shadow: 0px 0px 8px rgba(0,0,0,.3); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; }

/* Styles the lightbox, removes it from sight and adds the fade-in transition */

.lightbox-target { position: fixed; top: -100%; width: 100%; background: rgba(0,0,0,.7); width: 100%; opacity: 0; -webkit-transition: opacity .5s ease-in-out; -moz-transition: opacity .5s ease-in-out; -o-transition: opacity .5s ease-in-out; transition: opacity .5s ease-in-out; overflow: hidden; z-index: 999; }

/* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */

.lightbox-target img { margin: auto; position: absolute; top: 0; left:0; right:0; bottom: 0; max-height: 0%; max-width: 0%; border: 3px solid white; box-shadow: 0px 0px 8px rgba(0,0,0,.3); box-sizing: border-box; -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; }

/* Styles the close link, adds the slide down transition */

a.lightbox-close { display: block; width:50px; height:50px; box-sizing: border-box; background: white; color: black; text-decoration: none; position: absolute; top: -80px; right: 0; -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; }

/* Provides part of the "X" to eliminate an image from the close link */

a.lightbox-close:before { content: ""; display: block; height: 30px; width: 1px; background: black; position: absolute; left: 26px; top:10px; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); }

/* Provides part of the "X" to eliminate an image from the close link */

a.lightbox-close:after { content: ""; display: block; height: 30px; width: 1px; background: black; position: absolute; left: 26px; top:10px; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -o-transform:rotate(-45deg); transform:rotate(-45deg); }

/* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */

.lightbox-target:target { opacity: 1; top: 0; bottom: 0; }

.lightbox-target:target img { max-height: 100%; max-width: 100%; }

.lightbox-target:target a.lightbox-close { top: 0px; } a.lightbox img:hover {

background:#21A957;

} /*-----------------------------------------------------------------------------------*/

1. filters {

font-family: 'Oswald', serif; margin: 2em 0 3em; padding: 0; list-style: none; text-align: center; } #filters li { display: -webkit-inline-box; }

1. filters li span.active {

color: #21A957; background: #fff; }

1. filters li span {

display: block; padding: 5px 10px; text-decoration: none; color: #000; cursor: pointer; font-size: 14px; text-transform: uppercase; font-weight: 600; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; background: none; margin-right: 10px; }

	#portfoliolist .portfolio {

-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; width:25%; display:none; float:left; overflow:hidden; } div#portfoliolist {

} .portfolio-wrapper { overflow:hidden; position: relative !important; cursor:pointer; } .portfolio img { max-width:100%; /*--position: relative;--*/ transition: all 300ms!important; -webkit-transition: all 300ms!important; -moz-transition: all 300ms!important; } .portfolio img:hover {

} .portfolio .label1 { position: absolute; width: 100%; height:40px; bottom:-40px; } .portfolio .label-bg { background: #22B4B8; width: 100%; height:100%; position: absolute; top:0; left:0; } .portfolio .label1-text { color: #fff; position: relative; z-index: 500; padding:12px 8px; font-size: 0.835em; background: #F5D74D; font-family: 'Open Sans', sans-serif; } .portfolio .label1-text a{ text-decoration:none; } .portfolio .text-category { display:block; font-size: 12px; text-transform:uppercase; } /* Self Clearing Goodness */ .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; } .clearfix:before, .clearfix:after, .row:before, .row:after {

 content: '\0020';
 display: block;
 overflow: hidden;
 visibility: hidden;
 width: 0;
 height: 0; }

.row:after, .clearfix:after {

 clear: both; }

.row, .clearfix {

 zoom: 1; }

.clear {

 clear: both;
 display: block;
 overflow: hidden;
 visibility: hidden;
 width: 0;
 height: 0;

} /*-- Portfolio Ends Here --*/