body {
	background-image: url(/images/plyback.jpg);
}

#matrixWrap {
	margin-top: 200px;
	width: 1122px;
	margin-left: auto;
	margin-right: auto;
}

.box {
	width: 150px;
	opacity: 0.8;
	margin-right: 12px;
	border-radius: 2px;
	float: left;
	-webkit-box-shadow: 0 15px 15px -4px rgba(0, 0, 0, 0.7);
   	-moz-box-shadow: 0 15px 15px -4px rgba(0, 0, 0, 0.7);
   	box-shadow: 0 15px 15px -4px rgba(0, 0, 0, 0.7);
}

.box:last-child {
	margin-right: 0;
}

.box i {
	display: block;
	float: left;
	width: 20px;
	height: 20px;
	margin: 3px;
	border: 2px solid #300;
	background: linear-gradient( to bottom, transparent 0, transparent 20px, black 20px, black 40px);
	background-size: 20px 40px;
	background-repeat: no-repeat;
	-webkit-transition: background-position .2s ease-in;
	-moz-transition: background-position .2s ease-in;
	transition: background-position .2s ease-in;
}

.box i.white {
	background-position: 0 0;
}

.box i.black {
	background-position: 0 -20px;
}