html, body, div, span, 1, h2, h3, h4, h5, h6, p, a, img,  ol, ul, li {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

:focus {
	outline: 0;
}

a {
	text-decoration: none;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('https://themes.googleusercontent.com/font?kit=7KXg6nyyqN8gyMoNwQ7aOQ') format('woff');
}

body {
	background: #f6f6f6 url(images/bckgtexture.jpg);
	font-family: Roboto;
	padding-top: 40px;
	color: #393939;
}
	
#wrap {
	width: 1100px;
	margin: 0 auto;
}

h1 {
	font-size: 3em;
	margin-left: 20px;
	margin-bottom: 20px;
	text-shadow: 0 1px 0 #fff;
}

li {
	float: left;
	position: relative;
	display: inline-block;
	width: 300px;
	height: 300px;
	margin: 10px;
	padding: 10px;
	background: #fff;
	-webkit-box-shadow: 0 0 5px rgba(0,0,0,.35);
	-moz-box-shadow: 0 0 5px rgba(0,0,0,.35);
	box-shadow: 0 0 5px rgba(0,0,0,.35);
	-moz-border-radius: 15px;
	border-radius: 15px;
}

li div {
	position: absolute;
	height: 0;
	width: 280px;
	background: rgba(0,0,0,.45);
	overflow: hidden;
	bottom: 10px;
	left: 10px;
	padding: 0 10px;
	-webkit-transition: height 1s;
	-moz-transition: height 1s;
	-o-transition: height 1s;
	-ms-transition: height 1s;
	transition: height 1s;
	color: #fff;
	line-height: 50px;
	font-size: 1.2em;
}

li:hover div {
	height: 50px;
}

canvas {
	opacity: 1;
	position: absolute;
	top: 10px;
	left: 10px;
	-webkit-transition: opacity 1s .2s;
	-moz-transition: opacity 1s .2s;
	-o-transition: opacity 1s .2s;
	-ms-transition: opacity 1s .2s;
	transition: opacity 1s .2s;
}

li:hover canvas {
	opacity: 0;
}

p {
	clear: left;
	float: right;
	margin-top: 10px;
	margin-right: 20px;
}

p a {
	color: #909090;
	-webkit-transition: color .6s;
	-moz-transition: color .6s;
	-o-transition: color .6s;
	-ms-transition: color .6s;
	transition: color .6s;
}

p a:hover {
	color:#eb5cf4;
}