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

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

@media all {
  #ad-counter {
    background-image: url(300x250/counter.jpg); } }

@media only screen and (min-width: 619px) and (max-width: 979px) {
  #ad-counter {
    background-image: url(620x620/counter.jpg); } }

@media only screen and (min-width: 980px) {
  #ad-counter {
    background-image: url(980x400/counter.jpg); } }

@media all {
  #ad-inprogress, #ad-fallback {
    background-image: url(300x250/inprogress.jpg); } }

@media only screen and (min-width: 619px) and (max-width: 979px) {
  #ad-inprogress, #ad-fallback {
    background-image: url(620x620/inprogress.jpg); } }

@media only screen and (min-width: 980px) {
  #ad-inprogress, #ad-fallback {
    background-image: url(980x400/inprogress.jpg); } }

@media all {
  #ad-results {
    background-image: url(300x250/results-night.jpg); } }

@media only screen and (min-width: 619px) and (max-width: 979px) {
  #ad-results {
    background-image: url(620x620/results-night.jpg); } }

@media only screen and (min-width: 980px) {
  #ad-results {
    background-image: url(980x400/results-night.jpg); } }

@media all {
  .is-day #ad-results {
    background-image: url(300x250/results-day.jpg); } }

@media only screen and (min-width: 619px) and (max-width: 979px) {
  .is-day #ad-results {
    background-image: url(620x620/results-day.jpg); } }

@media only screen and (min-width: 980px) {
  .is-day #ad-results {
    background-image: url(980x400/results-day.jpg); } }

@media all {
  .is-latenight #ad-results {
    background-image: url(300x250/results-latenight.jpg); } }

@media only screen and (min-width: 619px) and (max-width: 979px) {
  .is-latenight #ad-results {
    background-image: url(620x620/results-latenight.jpg); } }

@media only screen and (min-width: 980px) {
  .is-latenight #ad-results {
    background-image: url(980x400/results-latenight.jpg); } }

html, body {
  margin: 0;
  padding: 0; }

body {
  background-color: #F6C14F;
  color: #fff;
  font-family: "KenoFont", sans-serif; }

img {
  vertical-align: middle; }

a {
  color: #fff;
  text-decoration: none; }

.link-block {
  display: block;
  overflow: hidden; }

.ad-view {
  position: relative;
  overflow: hidden;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 300px;
  height: 250px; }
  @media only screen and (min-width: 619px) and (max-width: 979px) {
    .ad-view {
      width: 620px;
      height: 620px; } }
  @media only screen and (min-width: 980px) {
    .ad-view {
      width: 980px;
      height: 400px; } }

.counter {
  font-weight: bold;
  text-align: center;
  margin: 105px auto 0; }
  @media only screen and (min-width: 619px) and (max-width: 979px) {
    .counter {
      margin-top: 320px; } }
  @media only screen and (min-width: 980px) {
    .counter {
      text-align: left;
      margin-top: 147px;
      margin-left: 560px; } }

.counter-number {
  display: inline-block;
  height: 120px;
  line-height: 120px;
  margin: 0;
  font-size: 40px;
  letter-spacing: -2.5px;
  text-shadow: 4px 4px #F86E25;
  text-shadow: 4px 4px rgba(242, 57, 89, 0.5); }
  @media only screen and (min-width: 619px) and (max-width: 979px) {
    .counter-number {
      font-size: 96px;
      letter-spacing: -6px;
      text-shadow: 4px 4px #F86E25;
      text-shadow: 4px 4px rgba(242, 57, 89, 0.5); } }
  @media only screen and (min-width: 980px) {
    .counter-number {
      font-size: 80px;
      letter-spacing: -5px;
      text-shadow: 4px 4px #F86E25;
      text-shadow: 4px 4px rgba(242, 57, 89, 0.5); } }
  .counter-number:after {
    display: inline-block;
    height: 120px;
    line-height: 120px;
    content: ":"; }

#seconds:after {
  display: none; }

.result-date {
  position: absolute;
  top: 45px;
  right: 25px;
  text-shadow: 2px 3px #F86E25;
  text-shadow: 2px 3px rgba(242, 57, 89, 0.5);
  font-size: 17.6px; }
  @media only screen and (min-width: 619px) and (max-width: 979px) {
    .result-date {
      top: 135px;
      right: 75px;
      font-size: 24px; } }
  @media only screen and (min-width: 980px) {
    .result-date {
      top: 60px;
      right: 75px;
      font-size: 24px; } }

.result-list {
  padding: 0;
  margin-top: 95px;
  margin-left: 60px;
  list-style: none;
  width: 210px;
  font-family: "Aller", sans-serif;
  font-weight: bold;
  text-indent: 24px; }
  @media only screen and (min-width: 619px) and (max-width: 979px) {
    .result-list {
      text-indent: 48px;
      width: 420px;
      margin-top: 226px;
      margin-left: 133px; } }
  @media only screen and (min-width: 980px) {
    .result-list {
      margin-top: 135px;
      margin-left: 240px;
      width: 540px;
      text-indent: 0; } }

.result-number {
  text-indent: 0;
  display: inline-block;
  background: #fd0;
  color: #333;
  text-align: center;
  border: 2px solid #fd0;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  line-height: 17px;
  border-radius: 20px;
  font-size: 10px;
  margin: 3.33333px; }
  .result-number.king {
    border-color: #f23959; }
  @media only screen and (min-width: 619px) and (max-width: 979px) {
    .result-number {
      width: 40px;
      height: 40px;
      line-height: 34px;
      border-radius: 40px;
      font-size: 20px;
      margin: 6.66667px; } }
  @media only screen and (min-width: 980px) {
    .result-number {
      width: 40px;
      height: 40px;
      line-height: 34px;
      border-radius: 40px;
      font-size: 20px;
      margin: 6.66667px; } }

.result-king {
  font-family: "Aller", sans-serif;
  color: #333;
  position: absolute;
  text-align: center;
  top: 188px;
  left: 196px;
  width: 25px;
  height: 25px;
  line-height: 21.25px;
  border-radius: 25px;
  font-size: 12.5px;
  margin: 4.16667px; }
  @media only screen and (min-width: 619px) and (max-width: 979px) {
    .result-king {
      top: 402px;
      left: 457px;
      width: 50px;
      height: 50px;
      line-height: 42.5px;
      border-radius: 50px;
      font-size: 25px;
      margin: 8.33333px; } }
  @media only screen and (min-width: 980px) {
    .result-king {
      top: 233px;
      left: 760px;
      width: 50px;
      height: 50px;
      line-height: 42.5px;
      border-radius: 50px;
      font-size: 25px;
      margin: 8.33333px; } }

/* ==========================================================================
   Helper classes
   ========================================================================== */
/*
 * Hide visually and from screen readers:
 * http://juicystudio.com/article/screen-readers-display-none.php
 */
.hidden {
  display: none !important;
  visibility: hidden; }

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.clearfix:before,
.clearfix:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */ }

.clearfix:after {
  clear: both; }