/* CSS for demo */
body, html {
	padding: 0;
	margin: 0;
	font-family: Arial, sans-serif;
	background-color: #e0e0e0;
}
a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid rgba(150, 150, 150, 0.7);
}
a:hover {
	color: rgb(150, 150, 250);
	border-bottom: 1px solid rgba(100, 100, 100, 1);
}

.item {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	padding: 40% 0;

	background-color: #666;
    color: white;
    background-position: center center;
    background-size: cover;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
	.item:hover:after {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(255, 255, 255, 0.7);
	}
.diamondswrap {
	text-align: center;
	padding: 50px 20px 100px 20px;
}

.controls {
	background-color: #272822;
	padding: 20px;
}
	.code {
		line-height: 1.5em;
		background-color: #272822;
		color: #F8F8F2;
	}
		.code * {
			font-family: monospace;
		}
	/* HTML */
	.code .tag {

	}
	.code .tagname {
		color: #F92672;
	}
	.code .attrname {
		color: #A6E22E; /* CSS propname: #66D9EF;*/
	}
	.code .attrval {
		color: #E6DB74;
	}

	/* JS */
	.code .int {
		color: #AE81FF;
	}
	.code .bool {
		color: #AE81FF;
	}
	.code .string {
		color: #E6DB74;
	}
	.code .var {
		color: #F92672;
	}
	.code .comment {
		color: #75715E;
	}
	.code input, .code select {
		background-color: transparent;
		border: 1px dotted #555;
		padding: 2px 5px;
		text-align: center;
	}
	.code input {
		width: 50px;
	}
	.code select {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
	}

.footer {
	color: #999;
	padding: 40px;
	text-align: center;
	font-size: 0.8em;
}