body { background: #eee; }
.title h1 a { color: rgb(51, 51, 51); text-decoration: none; }

.query { display: inline-block; width: 100px; }
.bar-container { height: 300px; width: 100px; position: relative; }
.bar {
	background: url('../img/grey.png');
	width: 100px;
	height: 0;
	position: absolute;
	bottom: 0;
	border-radius: 10px;
	transition: height 0.6s ease;
}
.bar.win { background: url('../img/green.png'); }
.vs-container { display: inline-block; width: 40px; }
.vs-container .questionmark { font-size: 200px; font-weight: bold; color: #eee; }
.compare-btn { width: 100px; }

@media (min-width: 576px) {
	.query, .bar-container, .bar, .compare-btn { width: 200px; }
	.vs-container { width: 60px; }
}
@media (min-width: 768px) {
	.vs-container { width: 100px; }
}
@media (min-width: 992px) {
	.vs-container { width: 200px; }
}

.timer { color: #999; }
.page { background: #fff; }
.footer { background: #eee; }