@font-face {
    font-family: 'LeagueGothicRegular';
    src: url('/assets/fonts/League_Gothic-webfont.eot');
    src: url('/assets/fonts/League_Gothic-webfont.eot?#iefix') format('embedded-opentype'),
         url('/assets/fonts/League_Gothic-webfont.woff') format('woff'),
         url('/assets/fonts/League_Gothic-webfont.ttf') format('truetype'),
         url('/assets/fonts/League_Gothic-webfont.svg#LeagueGothicRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@media screen and (min-width: 980px) {
  
  #flipclock .top {
  height: 68px;
  overflow: hidden;
  }
  #flipclock .bottom {
  height: 50px;
  line-height: 4px;
  margin-top: 5px;
  overflow: hidden;
  }
  
  #flipclock-head h1{
    width: 35%;
    margin: 3% auto 0 auto;
    font: bold 3em "LeagueGothicRegular";
    color: #ffffff;
    text-shadow: 0px 2px 0px #000;
  }
  
  @-moz-document url-prefix() { #flipclock-head h1 {font: normal 3em "Trebuchet MS"; width: 45%; }}
  
  #flipclock-foot { 
    width: 60%;
    margin: 0 auto 0 auto;
  }
  
  #flipclock-foot span {
  	padding: 0;
  	margin: 0 auto 0 auto;
  	width: 60%;
  	resize: both;
  	display: inline-block;
    font: bold 2em "LeagueGothicRegular";
    color: #ffffff;
    text-shadow: 0px 2px 0px #000;
  }
  
  @-moz-document url-prefix() { #flipclock-foot span {font: normal 1.5em "Trebuchet MS"; }}
  
	#flipclock {
		margin: 0 auto 0 auto;
		color: #ffffff;
		max-width: 60%;
	}
	

	
	#flipclock li {
		margin: 0 auto 0 auto;
		padding: 0 0 0 0;
		resize: both;
		display: inline-block;
		background: url(/assets/flip-clock-large.png) no-repeat;
		color: #ffffff;
		width: 140px;
		height: 143px;
		font: bold 6em "LeagueGothicRegular";
		text-align: center;
		line-height: 1.8;
		
	}
	@-moz-document url-prefix() { #flipclock li {font: normal 5.75em "Trebuchet MS"; line-height: 1.8; padding: 2px 0 0 0;} #flipclock .top{height: 66px;}}
	
}

@media screen and (max-width: 979px) {
  
  #flipclock .top {
  height: 44px;
  overflow: hidden;
  }
  #flipclock .bottom {
  height: 30px;
  line-height: 4px;
  margin-top: 3px;
  overflow: hidden;
  }
  
  #flipclock-head h1{
    width: 50%;
    margin: -1% auto 0 auto;
    font: bold 2.75em "LeagueGothicRegular";
    color: #ffffff;
    text-shadow: 0px 2px 0px #000;
  }
  
  @-moz-document url-prefix() { #flipclock-head h1 {font: normal 2em "Trebuchet MS"; width: 45%; }}
  
  
  #flipclock-foot { 
    width: 60%;
    margin: 0 auto 0 auto;
  }
  
  #flipclock-foot span {
  	padding: 0;
  	width: 60%;
  	resize: both;
  	display: inline-block;
    font: bold 1.75em "LeagueGothicRegular";
    color: #ffffff;
    text-shadow: 0px 2px 0px #000;
  }
  
  @-moz-document url-prefix() { #flipclock-foot span {font: normal 1.5em "Trebuchet MS"; }}
  
	#flipclock {
		margin: 0 auto 0 auto;
		resize: both;
		max-width: 60%;
	}
		
	#flipclock li {
		margin: 0;
		padding: 10px 0 0 0;
		resize: both;
		display: inline-block;
		background: url(/assets/flip-clock-medium.png) no-repeat;
    width: 112px;
		height: 114px;
		font: bold 5em "LeagueGothicRegular";
		text-align: center;
		line-height: 1.4;
		text-shadow: 0px -2px 0px #000;
		color: #ffffff;
	}
	@-moz-document url-prefix() { #flipclock li {font: normal 4.5em "Trebuchet MS"; line-height: 1.8; padding: 1px 0 0 0;} #flipclock .top {height: 53px;} #flipclock .bottom{ margin-top: 4px;}}
	
	
}

@media screen and (max-width: 767px) {
  
  #flipclock .top {
  height: 29px;
  overflow: hidden;
  }
  #flipclock .bottom {
  height: 27px;
  line-height: 4px;
  margin-top: 1px;
  overflow: hidden;
  }
  
  #flipclock-head h1{
    width: 70%;
    margin: -1% auto 0 auto;
    font: bold 1.5em "LeagueGothicRegular";
    color: #ffffff;
    text-shadow: 2px 2px 2px #000;
  }
  
  @-moz-document url-prefix() { #flipclock-head h1 {font: normal 1.5em "Trebuchet MS"; width: 70%; }}
  
  
  #flipclock-foot { 
    width: 100%;
    margin: 0 auto 30% auto;
  }
  
  #flipclock-foot .span3 {
	  display: inline-block;
	}
	
  #flipclock-foot span {
  	padding: 0 10% 0 10%;
  	margin: 0 auto 0 auto;
  	width: 100%;
  	resize: both;
  	display: inline-block;
    font: bold 1.25em "LeagueGothicRegular";
    color: #ffffff;
    text-shadow: 0px 2px 0px #000;
  }
  
  @-moz-document url-prefix() { #flipclock-foot { width: 100%; }}
  @-moz-document url-prefix() { #flipclock-foot span { font: normal 1em "Trebuchet MS"; padding: 0; margin: 0 12% 0 15%; }}
  
	#flipclock {
		margin: 0 auto 0 auto;
		max-width: 100%;
	}
		
	#flipclock .span3{
	  display: inline;
	}
	#flipclock li {
		margin: 0;
		padding: 2px 0 0 0;
		resize: both;
		display: inline-block;
		background: url(/assets/flip-clock-small.png) no-repeat;
    width: 63px;
		height: 64px;
		font: bold 2.5em "LeagueGothicRegular";
		text-align: center;
		line-height: 1.8;
		text-shadow: 0px -2px 0px #000;
		color: #ffffff;
	}
	@-moz-document url-prefix() { #flipclock li {font: normal 2.5em "Trebuchet MS"; line-height: 1.8; padding: 3px 0 0 0;} #flipclock .top{height: 28px;}}
	
}

@media screen and (max-width: 505px) {
  
  #flipclock .top {
  height: 17px;
  overflow: hidden;
  }
  #flipclock .bottom {
  height: 9px;
  line-height: 4px;
  margin-top: 1px;
  overflow: hidden;
  }
  
  #flipclock-head h1{
    width: 70%;
    margin: 4% auto 0 auto;
    font: bold 1em "LeagueGothicRegular";
    color: #ffffff;
    text-shadow: 2px 2px 2px #000;
  }
  
  @-moz-document url-prefix() { #flipclock-head h1 {font: normal .85em "Trebuchet MS"; width: 70%; }}
  
  
  #flipclock-foot { 
    width: 100%;
    margin: -2% auto 30% auto;
  }
  
  #flipclock-foot .span3 {
	  display: inline-block;
	}
	
  #flipclock-foot span {
    padding: 0 2% 0 3%;
    margin: 0 4% 0 5%;
  	width: 100%;
  	resize: both;
  	display: inline-block;
    font: bold .80em "LeagueGothicRegular";
    color: #ffffff;
    text-shadow: 0px 2px 0px #000;
  }
  
  @-moz-document url-prefix() { #flipclock-foot { width: 100%; margin: -2% auto 0 auto;}}
  @-moz-document url-prefix() { #flipclock-foot span { font: normal .65em "Trebuchet MS"; padding: 0; margin: 0 9% 0 11%; }}
  
	#flipclock {
		margin: -1% auto 0 auto;
		max-width: 100%;
	}	
	
	#flipclock .span3{
	    display: inline-block;
	  }
	#flipclock li {
		margin: 0;
		padding: 0;
		resize: both;
		display: inline-block;
		background: url(/assets/flip-clock-teensy.png) no-repeat;
    width: 35px;
		height: 36px;
		font: bold 1.4em "LeagueGothicRegular";
		text-align: center;
		line-height: 1.8;
		text-shadow: 0px -2px 0px #000;
		color: #ffffff;
	}
	@-moz-document url-prefix() { #flipclock li {font: normal 1.4em "Trebuchet MS"; padding: 7px 0 0 0;} #flipclock .top{height: 10px;} #flipclock .bottom{height: 10px; line-height: 1px;}}

	
}