@import url(http://fonts.googleapis.com/css?family=Droid+Sans|Nunito);
@import url(/iconfont/iconfont.css);

html, body { height: 100%; }
body
{
	background-color: black;
	background-image: url(/img/noise.png), linear-gradient(to bottom, rgba(33,68,69,0.8), rgba(33,68,69,0.8));
}
body.loading *
{
	transition: none !important;
}
#wrapper
{
	width: 100%;
	height: 100%;
    display: table;
}
#wrapper > div
{
    display: table-row;
}
#content > div
{
	height: 100%;
	overflow: auto;
}
#footer
{
	height: 1px;
}
header
{
	background: rgb(44, 62, 80) url(/img/header_bg.png);
	height: 3em;
}
#title
{
	width: 100%;
	height: 100%;
}
.experiment
{
	display: block;
	position: relative;
	height: 20em;
	overflow: hidden;
	font-size: 0.9em;
	border-bottom: 2px solid black;
	box-shadow: inset 0 1em 1em -1em rgba(0,0,0,0.5);
}
.experiment .preview
{
	z-index: -999999;
	position: absolute;
	left: -1px;
	top: 0;
	right: 0;
	height: 100%;
	/*background-position: center;*/
	/*-webkit-background-size: cover;*/
	background-size: cover;
	/*left: 50%;
	top: 50%;*/
	/* Add -webkit- because FOUC of prefixfree */
	/*-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	min-width: 100%;
	min-height: 100%;*/
	transition: transform .5s;
	/* Chrome flickering */
	backface-visibility: hidden;
}
.experiment .compatibility
{
	position: absolute;
	background: rgba(0,0,0,1);
	text-align: center;
	left: 0;
	top: 0;
	margin: 0;
	padding: 0;
	width: 2.5em;
	height: 100%;
	-webkit-transform: translate(0, 100%);
	transform: translate(0, 100%);
	transition: transform .5s;
}
.experiment .compatibility li
{
	font-size: 1.5em;
	color: white;
	opacity: 0.1;
	margin: 0.3em 0;
}
.experiment .compatibility li.compatible
{
	opacity: 1;
	color: #7fff78;
}
.experiment .meta
{
	position: absolute;
	color: white;
	background: rgba(0,0,0,1);
	overflow: hidden;
	left: 0;
	right: 0;
	bottom: 0;
	-webkit-transform: translate(0, 100%);
	transform: translate(0, 100%);
	transition: transform .5s;
	padding: 0.5em;
	padding-left: 3em;
}
.experiment .meta .name
{
	font-family: 'Droid Sans', sans-serif;
	font-size: 1.5em;
	font-weight: bold;
}
.experiment .meta .description
{
	font-family: 'Nunito', sans-serif;
}
.experiment:hover .preview,
.experiment:focus .preview,
.experiment.active .preview
{
	transform: translate(0, -1em);
}
.experiment:hover .meta,
.experiment:focus .meta,
.experiment.active .meta
{
	transform: none;
}
.experiment:hover .compatibility,
.experiment:focus .compatibility,
.experiment.active .compatibility
{
	transition-delay: .2s;
	transform: none;
}
#search
{
	position: fixed;
	top: 1em;
	right: 1em;
	z-index: 9999999999;
	transform: translateZ(0);
}
#search label
{
	background: rgba(255,255,255,0.8);
	box-shadow: 0 0 4px rgba(0,0,0,0.2);
	display: inline-block;
	height: 2em;
	line-height: 2em;
	border-radius: 1em;
	cursor: pointer;
}
#search label:before
{
	display: inline-block;
	width: 2em;
	text-align: center;
}
#search-input
{
	font-size: 1em;
	width: 1px;
	padding: 0;
	margin: 0;
	height: 2em;
	background: none;
	border: none;
	transition: width 0.5s;
	outline: none;
	font-family: 'Droid Sans', sans-serif;
	color: rgb(20,20,20);
	vertical-align: top;
}
#search-input:focus
{
	width: 10em;
}
footer
{
	overflow: hidden;
	clear: both;
	font-family: 'Droid Sans', sans-serif;
	background-color: black;
	background-image: url(/img/noise.png), linear-gradient(to bottom, rgba(21,41,41,0.8), rgba(33,68,69,0.8));
	color: white;
	border-top: 5px solid rgb(20,40,40);
	box-shadow: inset 0 1px 0 black,
		inset 0 0.5em 0.5em -0.5em rgba(0,0,0,0.5),
		0 -0.9em 0.9em -0.9em rgba(0,0,0,0.3);
	/* display: table; */
	width: 100%;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	justify-content: space-around;
	/*position: fixed;
	bottom: 0;
	left: 0;
	transform: translateZ(0);*/
}
footer .column
{
	display: inline-block;
	/* display: table-cell; */
	position: relative;
	box-sizing: border-box;
	/* width: 33%; */
	padding: 0.5em 1em;
	/* vertical-align: top; */
	-ms-flex: 1 33%;
	-webkit-flex: 1 33%;
	flex: 1 33%;
}
footer .column:before, footer .column:after
{
	content: '';
	position: absolute;
	width: 2px;
	height: 100%;
	left: 0;
	top: 0;
	background: radial-gradient(rgba(0,0,0,1), rgba(0,0,0,0) 75%);
}
footer .column:before
{
	width: 1px;
	left: -1px;
	background: radial-gradient(rgba(255,255,255,0.2), rgba(255,255,255,0) 75%);
}
footer .column:first-child:before, footer .column:first-child:after
{
	display: none;
}
footer ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
}
.social-links,
.websites
{
	text-align: justify;
	margin: 1em 3% 0;
}
.social-links:before,
.websites:before
{
	content: '';
	display: block;
	width: 100%;
	margin-bottom: -1em;
}
.social-links:after,
.websites:after
{
	content: '';
	display: inline-block;
	width: 100%;
}
.social-links a,
.websites a
{
	display: inline-block;
	position: relative;
	top: 1em;
	width: 27%;
	max-width: 100px;
	/* Not working on IE with backface-visibility */
	/* perspective: 15em; */
}
.social-links a img,
.websites a img
{
	width: 100%;
	/*max-width: 100px;*/
	transition: transform 0.5s;
	transform: perspective(20em) rotateY(0deg);
	backface-visibility: hidden;
}
.social-links a img.back,
.websites a img.back
{
	position: absolute;
	top: 0;
	left: 0;
	-webkit-transform: perspective(20em) rotateY(-180deg);
	transform: perspective(20em) rotateY(-180deg);
}
.social-links a:hover img,
.social-links a:focus img,
.websites a:hover img,
.websites a:focus img
{
	transform: perspective(20em) rotateY(180deg);
}
.social-links a:hover img.back,
.social-links a:focus img.back,
.websites a:hover img.back,
.websites a:focus img.back
{
	transform: perspective(20em) rotateY(0deg);
}