.wrapper a {
	color: #ADF;
	outline: none;
	text-decoration: none;
	-webkit-transition: .2s;
	-moz-transition: .2s;
	-ms-transition: .2s;
	-o-transition: .2s;
	transition: .2s}
.wrapper a:hover {color: #DEF}
a img {border: none}

.right {float: right}
.clear {clear: both}
  
.space {height: 40px}

.table {display: table}
.tr {display: table-row}
.td {display: table-cell}



body {
	background: url("bg-noise.png") #334;
	color: #CCD;
	font-family: sans-serif;
	margin: 0;
	text-shadow: 1px 1px #000}
.wrapper {
	margin: auto;
	width: 920px}



h1 {
	display: inline-block;
	margin: 0 0 10px 20px;
	text-shadow: 2px 2px 0 #000}

section {
	padding: 10px}



.card {
	background: url("cards.png");
	border: 10px solid rgba(0,0,0,.5);
	border-radius: 20px;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	box-shadow: 0 0 5px #000;
	display: block;
	height: 150px;
	opacity: .8;
	padding: 10px;
	width: 445px;
	-webkit-transition: .2s;
	-moz-transition: .2s;
	-ms-transition: .2s;
	-o-transition: .2s;
	transition: .2s}
.card:hover {
	box-shadow: 0 0 15px -2px #000;
	opacity: 1}
.card:nth-child(odd) {
	float: left}
.card:nth-child(even) {
	float: right}

.card.dream {
	background-position: 0 -10px}
.card.desto {
	background-position: 0 -160px}



#about .table {
	border-spacing: 2px;
	width: 100%}

.contact {
	background-image:
		-o-linear-gradient(
			right,
			rgba(0,0,0,.4),
			transparent 150px);
	background-image:
		-ms-linear-gradient(
			right,
			rgba(0,0,0,.4),
			transparent 150px);
	background-image:
		-moz-linear-gradient(
			right,
			rgba(0,0,0,.4),
			rgba(0,0,0,0) 150px);
	background-image:
		-webkit-linear-gradient(
			right,
			rgba(0,0,0,.4),
			rgba(0,0,0,0) 150px);
	border: 2px solid #556;
	border-left: none;
	border-radius: 20px 0 0 20px;
	margin-right: 2px;
	text-align: right;
	width: 200px}

.icon {
	background: url("icons-contact.png");
	display: inline-block;
	margin: 2px 0 -2px;
	padding: 8px}
.icon.tr {
	background-position: 0 0}
.icon.yt {
	background-position: -16px 0}
.icon.da {
	background-position: -32px 0}
.icon.fa {
	background-position: -48px 0}
.icon.ds {
	background-position: -64px 0}
.icon.lm {
	background-position: -80px 0}
.icon.em {
	background-position: -96px 0}



.me {
	background-image:
		-o-linear-gradient(
			left,
			rgba(0,0,0,.4),
			transparent 150px);
	background-image:
		-ms-linear-gradient(
			left,
			rgba(0,0,0,.4),
			transparent 150px);
	background-image:
		-moz-linear-gradient(
			left,
			rgba(0,0,0,.4),
			rgba(0,0,0,0) 150px);
	background-image:
		-webkit-linear-gradient(
			left,
			rgba(0,0,0,.4),
			rgba(0,0,0,0) 150px);
	border: 2px solid #556;
	border-radius: 0 20px 20px 0;
	border-right: none;
	overflow: hidden}
.me .ava {
	border: 2px solid #556;
	box-shadow: 0 0 8px -2px #000;
	float: left;
	margin-right: 8px}
.me .desc {
	margin-top: 0}

.contact, .me {
	background-color: rgba(0,0,0,.1);
	box-shadow: 0 4px 5px -5px #000 inset, 0 -4px 5px -5px #000 inset;
	padding: 8px}



.banner-box {
	background: rgba(0,0,0,.5);
	border-radius: 20px;
	box-shadow: 0 0 20px #000 inset;
	padding: 8px;
	text-align: center}



.tiny-links {
	bottom: 0;
	padding: 5px;
	position: absolute;
	right: 0}
.tiny-links, .tiny-links a {
	color: #889;
	-webkit-transition: .2s;
	-moz-transition: .2s;
	-ms-transition: .2s;
	-o-transition: .2s;
	transition: .2s}
.tiny-links a:hover {color: #AAB}