body {
	margin: 0;
	padding: 0;
	font-size: 18px;
	font-family: 'avenir', 'helvetica neue', arial, sans-serif;
}

.timer {
	display: flex;
	flex-flow: row;
	flex-wrap: wrap;
	margin: 0 auto;
	padding: 5% 0;
	width: 690px;
}



/* Timer header */

.timer header {
	flex: 3 3 100%;
	margin-bottom: 20px;
}

.timer header h1 {
	margin: 0;
	font-size: 3em;
}

.timer header h1 a {
	text-decoration: none;
	color: inherit;
}

.timer header .date {
	display: inline-block;
	font-size: 1em;
}

.timer header .excluded-days {
	float: right;
}



/* Timer components */

.timer-item {
	flex: 1 1 30%;
	text-align: center;
	margin-bottom: 50px;
}

.number {
	display: block;
	margin-bottom: -15px;
	font-size: 7em;
	font-weight: 200;
	line-height: 1;
}

.total-days .number,
.seconds .number,
.minutes .number,
.hours   .number {
	margin-bottom: -10px;
	font-size: 4em;
}

.total-days {
	flex: 1 1 100%;
	margin-bottom: 0;
}



/* Responsive layout */

@media (max-width: 720px) {
	.timer {
		width: 90%;
	}

	.timer-item {
		flex: 1 1 50%;
	}
}