@import url("https://fonts.googleapis.com/css?family=Lato");

.countdownBG {
	margin: 20px 0 20px 0 ;
	color: rgba(0, 0, 0, 0.72);
	text-decoration: none;
	font-weight: bold;
	text-shadow: 1px 1px 0 #ffffff;
	box-shadow:
		2px 2px 0.5em rgba(122, 98, 0, 0.55),
		inset 1px 1px 0 rgba(255, 255, 255, 0.9),
		inset -1px -1px 0 rgba(0, 0, 0, 0.34) ;
	border: 1px solid #deca73;
	-webkit-border-top-left-radius:25px;
	-moz-border-radius-topleft:25px;
	border-top-left-radius:25px;
	-webkit-border-top-right-radius:25px;
	-moz-border-radius-topright:25px;
	border-top-right-radius:25px;
	-webkit-border-bottom-right-radius:25px;
	-moz-border-radius-bottomright:25px;
	border-bottom-right-radius:25px;
	-webkit-border-bottom-left-radius:25px;
	-moz-border-radius-bottomleft:25px;
	border-bottom-left-radius:25px;
	background:
		-moz-linear-gradient(
			-72deg,
			#ffde45,
			#ffffff 16%,
			#ffde45 21%,
			#ffffff 24%,
			#452100 27%,
			#ffde45 36%,
			#ffffff 45%,
			#ffffff 60%,
			#ffde45 72%,
			#ffffff 80%,
			#ffde45 84%,
			#452100
		);
	background:
		-webkit-linear-gradient(
			-72deg,
			#ffde45,
			#ffffff 16%,
			#ffde45 21%,
			#ffffff 24%,
			#452100 27%,
			#ffde45 36%,
			#ffffff 45%,
			#ffffff 60%,
			#ffde45 72%,
			#ffffff 80%,
			#ffde45 84%,
			#452100
		);
  );
	background:
		-o-linear-gradient(
			-72deg,
			#ffde45,
			#ffffff 16%,
			#ffde45 21%,
			#ffffff 24%,
			#452100 27%,
			#ffde45 36%,
			#ffffff 45%,
			#ffffff 60%,
			#ffde45 72%,
			#ffffff 80%,
			#ffde45 84%,
			#452100
		);
  );
	background:
		linear-gradient(
			-72deg,
			#ffde45,
			#ffffff 16%,
			#ffde45 21%,
			#ffffff 24%,
			#452100 27%,
			#ffde45 36%,
			#ffffff 45%,
			#ffffff 60%,
			#ffde45 72%,
			#ffffff 80%,
			#ffde45 84%,
			#452100
		);
  );
}

.wrapper {
	text-align: center;
}

.time {
	font: bold 6em/1.4em Arial, Helvetica, sans-serif;
	color: #000;
}

.label {
	margin: -25px 0 20px 0 ;
	font-size: 2em;
	display: block;
	color: #666;
}


/* Smaller than mobile ****************************************************************** */

@media (min-width: 100px) AND (max-width: 576px) {

	.countdownBG {
		width: 100% ;
		margin: 20px 0 20px 0 ;
		padding: 10px 30px 0 15px ;
		border: 1px solid #deca73;
		-webkit-border-top-left-radius:10px;
		-moz-border-radius-topleft:10px;
		border-top-left-radius:10px;
		-webkit-border-top-right-radius:10px;
		-moz-border-radius-topright:10px;
		border-top-right-radius:10px;
		-webkit-border-bottom-right-radius:10px;
		-moz-border-radius-bottomright:10px;
		border-bottom-right-radius:10px;
		-webkit-border-bottom-left-radius:10px;
		-moz-border-radius-bottomleft:10px;
		border-bottom-left-radius:10px;
	}

	.time {
		font: bold 2.0em/1.4em Arial, Helvetica, sans-serif;
	}

	.label {
		margin: -15px 0 10px 0 ;
		font-size: .675em;
	}

}


/* Larger than mobile ******************************************************************* */

@media (min-width: 576px) AND (max-width: 768px) {

	.countdownBG {
		width: 100% ;
		margin: 20px 0 20px 0 ;
		border: 1px solid #deca73;
		-webkit-border-top-left-radius:10px;
		-moz-border-radius-topleft:10px;
		border-top-left-radius:10px;
		-webkit-border-top-right-radius:10px;
		-moz-border-radius-topright:10px;
		border-top-right-radius:10px;
		-webkit-border-bottom-right-radius:10px;
		-moz-border-radius-bottomright:10px;
		border-bottom-right-radius:10px;
		-webkit-border-bottom-left-radius:10px;
		-moz-border-radius-bottomleft:10px;
		border-bottom-left-radius:10px;
	}

	.time {
		font: bold 3.65em/1.4em Arial, Helvetica, sans-serif;
	}

	.label {
		margin: -10px 0 10px 0 ;
		font-size: 1.1em;
	}

}


/* Larger than phablet ****************************************************************** */

@media (min-width: 768px) AND (max-width: 992px) {

	.time {
		font: bold 4em/1.4em Arial, Helvetica, sans-serif;
	}

	.label {
		margin: -20px 0 20px 0 ;
		font-size: 1.5em;
	}

}


/* Larger than tablet ******************************************************************* */

@media (min-width: 992px) AND (max-width: 1200px) {

	.time {
		font: bold 4em/1.4em Arial, Helvetica, sans-serif;
	}

	.label {
		margin: -20px 0 20px 0 ;
		font-size: 1.5em;
	}

}


/* Larger than desktop ****************************************************************** */

@media (min-width: 1200px) AND (max-width: 1920px) {

	.time {
		font: bold 4em/1.4em Arial, Helvetica, sans-serif;
	}

	.label {
		margin: -25px 0 20px 0 ;
		font-size: 2em;
	}

}