.clearfix:before, .clearfix:after {
	content:"";
	display:table;
}
.clearfix:after {
	clear:both;
}
body {
	background-color: black;
	margin: 0;
	padding: 0;
	overflow: hidden;
}
#qr {
	background-color: white;
	padding: 25px;
	display: inline-block;
	
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -288px 0 0 -288px;
}
#qr > div {
	display: block;
	float: left;
	width: 25px;
	height: 25px;
	transition: background-color 0.4s;
}
#qr > div:nth-child(21n+1) {
	clear: both;
}
#qr > div.black {
	background-color: black;
}

@media screen and (max-width:979px) { /* Small screens */
	#qr {
		padding: 20px;
		margin: -230px 0 0 -230px;
	}
	#qr > div {
		width: 20px;
		height: 20px;
	}
}

@media screen and (max-width:767px) { /* Tablets */
	#qr {
		padding: 15px;
		margin: -173px 0 0 -173px;
	}
	#qr > div {
		width: 15px;
		height: 15px;
	}
}

@media screen and (max-width:479px) { /* Phones */
	#qr {
		padding: 8px;
		margin: -92px 0 0 -92px;
	}
	#qr > div {
		width: 8px;
		height: 8px;
	}
}