"

From 2014.igem.org

@font-face { font-weight: normal; font-style: normal; font-family: 'feathericons'; src:url('../fonts/feathericons/feathericons.eot?-8is7zf'); src:url('../fonts/feathericons/feathericons.eot?#iefix-8is7zf') format('embedded-opentype'), url('../fonts/feathericons/feathericons.woff?-8is7zf') format('woff'), url('../fonts/feathericons/feathericons.ttf?-8is7zf') format('truetype'), url('../fonts/feathericons/feathericons.svg?-8is7zf#feathericons') format('svg'); }

1. content .grid {

overflow: hidden; margin: 0; padding: 3em 0 0 0; width: 100%; list-style: none; text-align: center; }

/* Common style */

1. content .grid figure {

position: relative; z-index: 10; display: inline-block; overflow: hidden; margin: 10px; width: 30%; height: 400px; /*padding: px;*/ background: #3085a3; text-align: center; cursor: pointer; }

1. content .grid figure img {

position: relative; display: block; min-height: 100%; opacity: 0.8; }

1. content .grid figure figcaption {

padding: 2em; color: #fff; text-transform: uppercase; font-size: 1.25em; -webkit-backface-visibility: hidden; backface-visibility: hidden; }

1. content .grid figure figcaption::before,
2. content .grid figure figcaption::after {

pointer-events: none; }

1. content .grid figure figcaption,
2. content .grid figure a {

position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Anchor will cover the whole item by default */ /* For some effects it will show as a button */

1. content .grid figure a {

z-index: 1000; text-indent: 200%; white-space: nowrap; font-size: 0; opacity: 0; }

1. content .grid figure h2 {

word-spacing: -0.15em; font-weight: 300; }

1. content .grid figure h2 span {

font-weight: 800; }

1. content .grid figure h2,
2. content .grid figure p {

margin: 0; }

1. content .grid figure p {

letter-spacing: 1px; font-size: 80.5%; }

/*----------------------*/ /***** Ruby Effects *****/ /*----------------------*/

1. content figure.effect-ruby {

background-color: #6600CC; }

1. content figure.effect-ruby img {

opacity: 1; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: scale(1.15); transform: scale(1.15); }

1. content figure.effect-ruby:hover img {

opacity: 0.7; -webkit-transform: scale(1); transform: scale(1); }

1. content figure.effect-ruby h2 {

margin-top: 5%; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; -webkit-transform: translate3d(0,20px,0); transform: translate3d(0,20px,0); }

1. content figure.effect-ruby p {

margin: 1em 0 0; padding: 5em; font-weight: bold; border: 2px solid #fff; opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(0,20px,0) scale(1.1); transform: translate3d(0,20px,0) scale(1.1); }

1. content figure.effect-ruby:hover h2 {

-webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }

1. content figure.effect-ruby:hover p {

opacity: 1; -webkit-transform: translate3d(0,0,0) scale(1); transform: translate3d(0,0,0) scale(1); }

@media screen and (max-width: 69.5em) { #content .grid figure { width: 50%; }

#content .grid figure figcaption { font-size: 90%; } }

@media screen and (max-width: 41.5em) {

#content .grid figure { width: 100%; } }