"

From 2014.igem.org

/* Overlay style */

1. content .overlay {

position: fixed; width: 100%; height: 100%; padding-right: 5%; padding-left: 5%; top: 0; left: 0; /*background: rgba(10,0,20,0.9);*/ background: rgba(0,0,0,0.8); color: #fff; overflow-y: scroll; overflow-x: hidden; }

1. content .overlay2 {

position: fixed; width: 100%; height: 100%; top: 0; left: 0; /*background: rgba(70,70,70,0.9);*/ background: rgba(0,0,0,0.8); color: #fff; overflow-y: scroll; overflow-x: hidden; }

1. content .overlay3 {

position: fixed; width: 70%; height: 40%; top: 50%; left: 50%; float: center; background: rgba(70,70,70,0.9); color: #fff; overflow-y: scroll; overflow-x: hidden; }

::-webkit-scrollbar{
	display: none;

} /* Overlay closing cross */

1. content .overlay .overlay-close {

width: 35px; height: 40px; position: absolute; right: 20px; top: 20px; overflow: hidden; border: none; background: url(../img/cross.png) no-repeat center center; text-indent: 200%; color: transparent; outline: none; z-index: 100; }

1. content .overlay2 .overlay-close2 {

width: 35px; height: 40px; position: absolute; right: 20px; top: 20px; overflow: hidden; border: none; background: url(../img/cross.png) no-repeat center center; text-indent: 200%; color: transparent; outline: none; z-index: 100; }

1. content .overlay3 .overlay-close3 {

width: 35px; height: 40px; position: absolute; right: 20px; top: 20px; overflow: hidden; border: none; background: url(../img/cross.png) no-repeat center center; text-indent: 200%; color: transparent; outline: none; z-index: 100; }

1. content .overall-bit{

top: -30px; /*zpadding: 50px;*/ font-size: 50px; text-align: center; }

1. content .overall-bit h3{

font-size: 90px; }

1. content .description {

text-align: center; position: relative; font-size: 20px; top: 10%; /*height: 100%;*/ -webkit-transform: translateY(-50%); transform: translateY(-50%); }

1. content .description h2 {

/*list-style: none;*/ padding: 0; /*margin: 0 auto;*/ display: inline-block; font-size: 54px; border-bottom: 2px solid; line-height: 90px; /*text-transform: uppercase;*/ /*height: 100%;*/ position: relative; }

1. content .details {

text-align: left; font-size: 20px; /*text-align: left;*/ position: relative; }

1. content .details h3 {

font-size: 40px; }

/* Effects */

1. content .overlay-overview {

visibility: hidden; opacity: 0; -webkit-transform: scale(0.9); transform: scale(0.9); -webkit-transition: -webkit-transform 0.2s, opacity 0.2s, visibility 0s 0.2s; transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s; }

1. content .overlay-team {

visibility: hidden; opacity: 0; -webkit-transform: scale(0.9); transform: scale(0.9); -webkit-transition: -webkit-transform 0.2s, opacity 0.2s, visibility 0s 0.2s; transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s; }

1. content .overlay-beta {

visibility: hidden; opacity: 0; -webkit-transform: scale(0.9); transform: scale(0.9); -webkit-transition: -webkit-transform 0.2s, opacity 0.2s, visibility 0s 0.2s; transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s; }

1. content .overlay-overview.open {

visibility: visible; opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 0.4s, opacity 0.4s; transition: transform 0.4s, opacity 0.4s; }

1. content .overlay-team.open {

visibility: visible; opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 0.4s, opacity 0.4s; transition: transform 0.4s, opacity 0.4s; }

1. content .overlay-beta.open {

visibility: visible; opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 0.4s, opacity 0.4s; transition: transform 0.4s, opacity 0.4s; }

/*@media screen and (max-height: 30.5em) { #content .overlay nav { height: 70%; font-size: 34px; } #content .overlay ul li { min-height: 34px; } }*/