.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 15px 100px 15px;
}

.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;
	}