@import url("//hello.myfonts.net/count/2f439c");
@import url(//fonts.googleapis.com/css?family=Roboto:400,700&subset=latin,latin-ext);
/**
 * Mixins
 **/
/**
 * Generate CSS transition with vendor prefixes
 **/
/**
 * Generate border-radius with vendor prefixes
 **/
/**
 * Distribute all elements within a container
 * Add this mixin to the container style
 * Children will be inline-blocks
 * Play around with the width of contained elements
 * Add this to the container: <span class="stretch"></span>
 **/
/**
 * Use CSS transform to alter position of elements
 **/
/**
 * Center elements vertically and/or horizontally. Parent should not have static positioning.
 * V: vertical, H: horizontal, null: both
 **/
/**
 * Lets <img> tags emulate background-size:cover
 * by forcing them to be at least as big as the container
 * while letting them retain their aspect ratio
 **/
/**
 * Set a color for all the link states
 * First variable: normal state
 * Second variable: hover/active/focus state
 * If second variable is not specified,
 * the first color will be darkened 20%
 **/
/**
 * Responsive typography
 * All fields are optional because they have a default value
 * If you want a header type to stay the same size, set it to null, e.g. $h6: null
 **/
/**
 * Bootstrap overrides, browser fixes
 **/
body {
  -webkit-text-size-adjust: 100%; }

a, a:focus, a:active, a:hover {
  outline: 0;
  text-decoration: none; }

input:focus, input:active, textarea:focus, textarea:active {
  outline: none; }

textarea {
  resize: none; }

table {
  table-layout: fixed; }

.nav > li {
  display: inline-block; }
  .nav > li > a {
    padding: 0; }
    .nav > li > a:focus, .nav > li > a:active {
      background: none; }

/* @import must be at top of file, otherwise CSS will not work */
@font-face {
  font-family: 'Urbana-SemiBold';
  src: url("webfonts/2F439C_0_0.eot");
  src: url("webfonts/2F439C_0_0.eot?#iefix") format("embedded-opentype"), url("webfonts/2F439C_0_0.woff2") format("woff2"), url("webfonts/2F439C_0_0.woff") format("woff"), url("webfonts/2F439C_0_0.ttf") format("truetype"); }

/*font-family: 'Roboto', sans-serif;*/
/* body */
body {
  position: relative;
  font-family: 'Urbana-SemiBold';
  background-color: #00a5e0; }

/* style */
a, .pointer {
  cursor: pointer; }

.disclaimer {
  color: white;
  padding: 10px;
  margin: 0px; }

.terms {
  display: block;
  font-family: 'Roboto', sans-serif;
  text-decoration: underline;
  text-align: center;
  margin: 20px auto 60px auto; }
  .terms, .terms:link {
    color: #0006ff; }
  .terms:hover, .terms:active {
    color: #0006ff; }
  .terms:hover {
    text-decoration: underline; }

.roundedbutton {
  /* FF1+ */
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-topright: 10px;
  -moz-border-radius-bottomright: 10px;
  -moz-border-radius-bottomleft: 10px;
  /* Saf3-4, iOS 1+, Android 1.5+ */
  -webkit-border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
  /* Opera 10.5, IE9, Saf5, Chrome, FF4 */
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  /* useful if you don't want a bg color from leaking outside the border: */
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  -moz-transition: all 0.25s linear;
  /* FF4+ */
  -o-transition: all 0.25s linear;
  /* Opera 10.5+ */
  -webkit-transition: all 0.25s linear;
  /* Saf3.2+, Chrome */
  -ms-transition: all 0.25s linear;
  /* IE10? */
  transition: all 0.25s linear;
  display: inline-block;
  padding: 10px 20px;
  text-align: center;
  font-size: 20px;
  line-height: 24px;
  color: white;
  background-color: #ec1c24; }
  .roundedbutton:hover {
    color: #ec1c24;
    background-color: white; }
  .roundedbutton.bigbottom {
    margin-bottom: 50px; }
  .roundedbutton.bigtop {
    margin-top: 80px; }
  .roundedbutton.tworow {
    line-height: 48px; }

.info {
  /* FF1+ */
  -moz-border-radius-topleft: 18px;
  -moz-border-radius-topright: 18px;
  -moz-border-radius-bottomright: 18px;
  -moz-border-radius-bottomleft: 18px;
  /* Saf3-4, iOS 1+, Android 1.5+ */
  -webkit-border-top-left-radius: 18px;
  -webkit-border-top-right-radius: 18px;
  -webkit-border-bottom-right-radius: 18px;
  -webkit-border-bottom-left-radius: 18px;
  /* Opera 10.5, IE9, Saf5, Chrome, FF4 */
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  border-bottom-right-radius: 18px;
  border-bottom-left-radius: 18px;
  /* useful if you don't want a bg color from leaking outside the border: */
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  display: block;
  float: right;
  margin: 5px 15px;
  width: 28px;
  height: 28px;
  text-align: center;
  line-height: 28px;
  color: white;
  text-decoration: none;
  background-color: #282780; }
  .info:hover {
    color: white; }

.dotted-vertical {
  width: 10px;
  background: url(../img/bg-dotted-vertical.png) center top no-repeat; }

.dotted-bottom {
  height: 10px;
  background: url(../img/bg-dotted-horizontal.png) left center no-repeat;
  margin: 8px; }

/* block elemenst */
section.page {
  position: relative;
  min-height: 1000px;
  width: 100%;
  max-width: 810px;
  margin: 0px auto;
  background-color: #00a5e0;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-image: url(../img/bg_footer.jpg); }
  @media (-webkit-min-device-pixel-ratio: 2) {
    section.page {
      background-image: url(../img/bg_footer_@2X.jpg);
      background-size: 810px 583px; } }
  section.page .headerpic {
    display: block; }
    section.page .headerpic img {
      width: 100%; }

.menu {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  flex-direction: row;
  -webkit-flex-direction: row;
  align-items: stretch;
  padding: 10px 50px 15px 50px; }
  .menu .menubutton {
    /* FF1+ */
    -moz-border-radius-topleft: 15px;
    -moz-border-radius-topright: 0;
    -moz-border-radius-bottomright: 15px;
    -moz-border-radius-bottomleft: 0;
    /* Saf3-4, iOS 1+, Android 1.5+ */
    -webkit-border-top-left-radius: 15px;
    -webkit-border-top-right-radius: 0;
    -webkit-border-bottom-right-radius: 15px;
    -webkit-border-bottom-left-radius: 0;
    /* Opera 10.5, IE9, Saf5, Chrome, FF4 */
    border-top-left-radius: 15px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 0;
    /* useful if you don't want a bg color from leaking outside the border: */
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    -moz-transition: all 0.25s linear;
    /* FF4+ */
    -o-transition: all 0.25s linear;
    /* Opera 10.5+ */
    -webkit-transition: all 0.25s linear;
    /* Saf3.2+, Chrome */
    -ms-transition: all 0.25s linear;
    /* IE10? */
    transition: all 0.25s linear;
    display: block;
    max-width: 24%;
    flex-grow: 1;
    flex-basis: auto;
    height: 40px;
    color: white;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 30px;
    line-height: 40px;
    font-weight: bold;
    background-color: #62d5f3;
    text-shadow: 0 1px 2px #666666; }
    .menu .menubutton:hover, .menu .menubutton.active {
      color: #282780;
      background-color: white; }

.shadow {
  width: 200px;
  height: 38px;
  margin: 0px auto 0px auto;
  background: url(../img/bg_profileshadow.png) center top no-repeat; }

main {
  min-height: 500px;
  /* main */
  /* reg */
  /* mainforreg */
  /* codes */
  /* score */
  /* winners */
  /* multiplayer */
  /* game page (not the gameboard%) */ }
  main h1 {
    text-shadow: -1px -1px 1px #242373;
    font-size: 40px;
    color: white;
    margin-top: 0px;
    margin-bottom: 40px;
    text-align: center;
    text-transform: uppercase; }
  main h2 {
    text-shadow: -1px -1px 1px #242373;
    font-size: 20px;
    color: white;
    margin-bottom: 10px;
    text-align: center; }
  main p {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: white;
    margin: 0px 50px 14px 50px; }
  main .bg {
    padding: 10px 50px;
    background: url(../img/bg_glow.png?v2) center top no-repeat; }
    main .bg h1 {
      margin: 0px 15px 15px 15px; }
    main .bg p {
      margin-left: 15px;
      margin-right: 15px; }
    main .bg > .row {
      margin-left: 0px;
      margin-right: 0px; }
  main .prizes {
    margin: 30px 0px 100px 0px; }
  main.register {
    padding-bottom: 150px; }
  main .regform {
    margin: 50px; }
    main .regform label {
      text-shadow: -1px -1px 1px #242373;
      font-size: 20px;
      color: white;
      margin-left: 25px; }
    main .regform input[type="text"], main .regform input[type="email"] {
      /* FF1+ */
      -moz-border-radius-topleft: 17px;
      -moz-border-radius-topright: 17px;
      -moz-border-radius-bottomright: 17px;
      -moz-border-radius-bottomleft: 17px;
      /* Saf3-4, iOS 1+, Android 1.5+ */
      -webkit-border-top-left-radius: 17px;
      -webkit-border-top-right-radius: 17px;
      -webkit-border-bottom-right-radius: 17px;
      -webkit-border-bottom-left-radius: 17px;
      /* Opera 10.5, IE9, Saf5, Chrome, FF4 */
      border-top-left-radius: 17px;
      border-top-right-radius: 17px;
      border-bottom-right-radius: 17px;
      border-bottom-left-radius: 17px;
      /* useful if you don't want a bg color from leaking outside the border: */
      -moz-background-clip: padding;
      -webkit-background-clip: padding-box;
      background-clip: padding-box;
      height: 28px;
      line-height: 28px;
      border: 0px;
      color: #242373;
      background-color: #62d5f3;
      -webkit-box-shadow: -3px -3px 0 0 #0094c9;
      box-shadow: -3px -3px 0 0 #0094c9; }
    main .regform .checkbox {
      display: block;
      height: 20px;
      padding-top: 4px;
      margin-left: 192px;
      padding-left: 28px;
      color: white;
      font-size: 14px;
      line-height: 20px;
      background: url(../img/sprite_check.png?v2) left 3px no-repeat; }
      main .regform .checkbox.selected {
        background: url(../img/sprite_check.png?v2) left -37px no-repeat; }
  main .fb-like {
    margin-bottom: 30px;
    background-color: white;
    padding: 10px; }
  main .boardimage {
    text-align: center;
    margin: 25px 0px 45px 0px; }
  main .codesection {
    margin: 40px 15px 10px 15px;
    clear: both; }
    main .codesection .lead {
      float: left;
      width: 430px; }
      main .codesection .lead p {
        margin-left: 14px;
        margin-right: 14px; }
    main .codesection .codes {
      /* FF1+ */
      -moz-border-radius-topleft: 17px;
      -moz-border-radius-topright: 17px;
      -moz-border-radius-bottomright: 17px;
      -moz-border-radius-bottomleft: 17px;
      /* Saf3-4, iOS 1+, Android 1.5+ */
      -webkit-border-top-left-radius: 17px;
      -webkit-border-top-right-radius: 17px;
      -webkit-border-bottom-right-radius: 17px;
      -webkit-border-bottom-left-radius: 17px;
      /* Opera 10.5, IE9, Saf5, Chrome, FF4 */
      border-top-left-radius: 17px;
      border-top-right-radius: 17px;
      border-bottom-right-radius: 17px;
      border-bottom-left-radius: 17px;
      /* useful if you don't want a bg color from leaking outside the border: */
      -moz-background-clip: padding;
      -webkit-background-clip: padding-box;
      background-clip: padding-box;
      -webkit-box-shadow: -3px -3px 0 0 #0094c9;
      box-shadow: -3px -3px 0 0 #0094c9;
      background-color: #62d5f3;
      float: right;
      width: 235px;
      max-width: 235px;
      height: 85px;
      margin-right: 14px; }
      main .codesection .codes p {
        font-family: 'Urbana-SemiBold';
        font-size: 30px;
        line-height: 85px;
        text-align: right;
        margin: 0px 5px; }
  main .codelist {
    margin-bottom: 200px; }
    main .codelist td {
      font-size: 20px;
      height: 48px;
      color: white;
      padding-left: 15px; }
      main .codelist td.cell-code {
        font-family: 'Roboto', sans-serif; }
    main .codelist tbody tr:nth-child(odd) {
      background-color: #62d5f3; }
    main .codelist tbody tr:nth-child(even) td {
      color: #282780; }
    main .codelist .roundedbutton {
      padding: 3px 20px; }
  main .profile {
    max-width: 30%;
    flex-grow: 1;
    flex-basis: auto;
    text-align: center;
    margin-left: auto;
    margin-right: auto; }
    main .profile figure {
      /* FF1+ */
      -moz-border-radius-topleft: 68px;
      -moz-border-radius-topright: 68px;
      -moz-border-radius-bottomright: 68px;
      -moz-border-radius-bottomleft: 68px;
      /* Saf3-4, iOS 1+, Android 1.5+ */
      -webkit-border-top-left-radius: 68px;
      -webkit-border-top-right-radius: 68px;
      -webkit-border-bottom-right-radius: 68px;
      -webkit-border-bottom-left-radius: 68px;
      /* Opera 10.5, IE9, Saf5, Chrome, FF4 */
      border-top-left-radius: 68px;
      border-top-right-radius: 68px;
      border-bottom-right-radius: 68px;
      border-bottom-left-radius: 68px;
      /* useful if you don't want a bg color from leaking outside the border: */
      -moz-background-clip: padding;
      -webkit-background-clip: padding-box;
      background-clip: padding-box;
      display: block;
      width: 136px;
      height: 136px;
      margin: 20px auto 10px auto;
      border: 4px solid #282780;
      background-color: white;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: 136px 136px;
      text-align: center; }
  main.results .bg {
    min-height: 1150px;
    padding-bottom: 350px; }
  main .scorerow {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    flex-direction: row;
    -webkit-flex-direction: row;
    align-items: stretch;
    margin: 10px 15px; }
    main .scorerow .dotted-vertical {
      max-width: 2%;
      flex-grow: 1;
      flex-basis: auto; }
    main .scorerow .scores {
      max-width: 60%;
      flex-grow: 1;
      flex-basis: auto; }
      main .scorerow .scores h3 {
        margin-top: 0px;
        color: #282780;
        text-transform: uppercase; }
      main .scorerow .scores .results th {
        font-family: 'Roboto', sans-serif;
        font-size: 12px;
        font-weight: normal;
        color: white;
        text-align: left;
        padding: 10px 10px 5px 10px; }
      main .scorerow .scores .results td {
        color: white;
        vertical-align: middle; }
        main .scorerow .scores .results td.title {
          width: 145px;
          padding: 10px;
          font-size: 19px;
          color: white; }
          main .scorerow .scores .results td.title.big {
            width: 145px; }
      main .scorerow .scores .results .rounded {
        /* FF1+ */
        -moz-border-radius-topleft: 17px;
        -moz-border-radius-topright: 17px;
        -moz-border-radius-bottomright: 17px;
        -moz-border-radius-bottomleft: 17px;
        /* Saf3-4, iOS 1+, Android 1.5+ */
        -webkit-border-top-left-radius: 17px;
        -webkit-border-top-right-radius: 17px;
        -webkit-border-bottom-right-radius: 17px;
        -webkit-border-bottom-left-radius: 17px;
        /* Opera 10.5, IE9, Saf5, Chrome, FF4 */
        border-top-left-radius: 17px;
        border-top-right-radius: 17px;
        border-bottom-right-radius: 17px;
        border-bottom-left-radius: 17px;
        /* useful if you don't want a bg color from leaking outside the border: */
        -moz-background-clip: padding;
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
        -webkit-box-shadow: -3px -3px 0 0 #0094c9;
        box-shadow: -3px -3px 0 0 #0094c9;
        background-color: #62d5f3;
        display: inline-block;
        text-align: right;
        width: 100px;
        padding: 5px 10px;
        font-size: 24px;
        margin-left: 10px; }
  main .tag {
    /* FF1+ */
    -moz-border-radius-topleft: 15px;
    -moz-border-radius-topright: 0;
    -moz-border-radius-bottomright: 15px;
    -moz-border-radius-bottomleft: 0;
    /* Saf3-4, iOS 1+, Android 1.5+ */
    -webkit-border-top-left-radius: 15px;
    -webkit-border-top-right-radius: 0;
    -webkit-border-bottom-right-radius: 15px;
    -webkit-border-bottom-left-radius: 0;
    /* Opera 10.5, IE9, Saf5, Chrome, FF4 */
    border-top-left-radius: 15px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 0;
    /* useful if you don't want a bg color from leaking outside the border: */
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    display: inline-block;
    padding: 7px 10px;
    background-color: white;
    color: #282780;
    font-size: 24px;
    text-transform: uppercase;
    margin: 20px 15px; }
  main .resultlist {
    font-size: 24px;
    color: white;
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 100px; }
    main .resultlist tr:nth-child(odd) {
      background-color: #62d5f3; }
    main .resultlist tr:nth-child(even) td {
      color: #282780; }
    main .resultlist figure {
      /* FF1+ */
      -moz-border-radius-topleft: 22px;
      -moz-border-radius-topright: 22px;
      -moz-border-radius-bottomright: 22px;
      -moz-border-radius-bottomleft: 22px;
      /* Saf3-4, iOS 1+, Android 1.5+ */
      -webkit-border-top-left-radius: 22px;
      -webkit-border-top-right-radius: 22px;
      -webkit-border-bottom-right-radius: 22px;
      -webkit-border-bottom-left-radius: 22px;
      /* Opera 10.5, IE9, Saf5, Chrome, FF4 */
      border-top-left-radius: 22px;
      border-top-right-radius: 22px;
      border-bottom-right-radius: 22px;
      border-bottom-left-radius: 22px;
      /* useful if you don't want a bg color from leaking outside the border: */
      -moz-background-clip: padding;
      -webkit-background-clip: padding-box;
      background-clip: padding-box;
      display: block;
      width: 44px;
      height: 44px;
      margin: 10px 15px 10px 0px;
      border: 2px solid #282780;
      background-color: white;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: 44px 44px;
      text-align: center; }
    main .resultlist .rounded {
      /* FF1+ */
      -moz-border-radius-topleft: 17px;
      -moz-border-radius-topright: 17px;
      -moz-border-radius-bottomright: 17px;
      -moz-border-radius-bottomleft: 17px;
      /* Saf3-4, iOS 1+, Android 1.5+ */
      -webkit-border-top-left-radius: 17px;
      -webkit-border-top-right-radius: 17px;
      -webkit-border-bottom-right-radius: 17px;
      -webkit-border-bottom-left-radius: 17px;
      /* Opera 10.5, IE9, Saf5, Chrome, FF4 */
      border-top-left-radius: 17px;
      border-top-right-radius: 17px;
      border-bottom-right-radius: 17px;
      border-bottom-left-radius: 17px;
      /* useful if you don't want a bg color from leaking outside the border: */
      -moz-background-clip: padding;
      -webkit-background-clip: padding-box;
      background-clip: padding-box;
      -webkit-box-shadow: -3px -3px 0 0 #0094c9;
      box-shadow: -3px -3px 0 0 #0094c9;
      background-color: #62d5f3;
      display: inline-block;
      text-align: right;
      width: 180px;
      padding: 5px 10px;
      font-size: 24px;
      margin-left: 10px; }
    main .resultlist .roundedbutton.user {
      width: 150px;
      margin-left: 20px; }
  main .getcode h1 {
    /* FF1+ */
    -moz-border-radius-topleft: 17px;
    -moz-border-radius-topright: 17px;
    -moz-border-radius-bottomright: 17px;
    -moz-border-radius-bottomleft: 17px;
    /* Saf3-4, iOS 1+, Android 1.5+ */
    -webkit-border-top-left-radius: 17px;
    -webkit-border-top-right-radius: 17px;
    -webkit-border-bottom-right-radius: 17px;
    -webkit-border-bottom-left-radius: 17px;
    /* Opera 10.5, IE9, Saf5, Chrome, FF4 */
    border-top-left-radius: 17px;
    border-top-right-radius: 17px;
    border-bottom-right-radius: 17px;
    border-bottom-left-radius: 17px;
    /* useful if you don't want a bg color from leaking outside the border: */
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    -webkit-box-shadow: -3px -3px 0 0 #0094c9;
    box-shadow: -3px -3px 0 0 #0094c9;
    background-color: #62d5f3;
    display: inline-block;
    padding: 10px 20px;
    min-height: 70px;
    min-width: 200px; }
  main .getcode .roundedbutton {
    width: 150px;
    margin-bottom: 20px; }
  main.winners {
    padding-bottom: 350px; }
  main figure.winner {
    display: block;
    margin: 20px auto 10px auto;
    border: 4px solid #282780;
    background-color: white;
    background-position: center center;
    background-repeat: no-repeat;
    text-align: center; }
    main figure.winner.mainprize {
      /* FF1+ */
      -moz-border-radius-topleft: 90px;
      -moz-border-radius-topright: 90px;
      -moz-border-radius-bottomright: 90px;
      -moz-border-radius-bottomleft: 90px;
      /* Saf3-4, iOS 1+, Android 1.5+ */
      -webkit-border-top-left-radius: 90px;
      -webkit-border-top-right-radius: 90px;
      -webkit-border-bottom-right-radius: 90px;
      -webkit-border-bottom-left-radius: 90px;
      /* Opera 10.5, IE9, Saf5, Chrome, FF4 */
      border-top-left-radius: 90px;
      border-top-right-radius: 90px;
      border-bottom-right-radius: 90px;
      border-bottom-left-radius: 90px;
      /* useful if you don't want a bg color from leaking outside the border: */
      -moz-background-clip: padding;
      -webkit-background-clip: padding-box;
      background-clip: padding-box;
      width: 180px;
      height: 180px;
      background-size: 180px 180px; }
    main figure.winner.weeklyprize {
      /* FF1+ */
      -moz-border-radius-topleft: 75px;
      -moz-border-radius-topright: 75px;
      -moz-border-radius-bottomright: 75px;
      -moz-border-radius-bottomleft: 75px;
      /* Saf3-4, iOS 1+, Android 1.5+ */
      -webkit-border-top-left-radius: 75px;
      -webkit-border-top-right-radius: 75px;
      -webkit-border-bottom-right-radius: 75px;
      -webkit-border-bottom-left-radius: 75px;
      /* Opera 10.5, IE9, Saf5, Chrome, FF4 */
      border-top-left-radius: 75px;
      border-top-right-radius: 75px;
      border-bottom-right-radius: 75px;
      border-bottom-left-radius: 75px;
      /* useful if you don't want a bg color from leaking outside the border: */
      -moz-background-clip: padding;
      -webkit-background-clip: padding-box;
      background-clip: padding-box;
      width: 150px;
      height: 150px;
      background-size: 150px 150px;
      margin-top: 0px; }
  main .winnername, main .lottery {
    font-size: 24px;
    text-align: center;
    color: white; }
  main .lottery {
    margin-top: 80px; }
  main .weeklywinnerspace {
    height: 50px; }
  main.multiplayer .challenge {
    margin-bottom: 60px; }
    main.multiplayer .challenge .profile {
      max-width: 60%;
      margin-left: auto;
      margin-right: auto; }
      main.multiplayer .challenge .profile h2 {
        line-height: 30px; }
  main.game {
    position: relative; }
    main.game .gamecontainer {
      width: 788px;
      padding-bottom: 200px;
      margin-left: 11px; }
    @media (max-width: 1024px) {
      main.game {
        width: 788px;
        margin: 0px auto; }
        main.game .gamecontainer {
          -moz-transform: scale(1);
          -webkit-transform: scale(1);
          -o-transform: scale(1);
          -ms-transform: scale(1);
          transform: scale(1);
          -ms-transform-origin: top left;
          /* IE 9 */
          -webkit-transform-origin: top left;
          /* Chrome, Safari, Opera */
          transform-origin: top left;
          margin-left: 0px; } }
    @media (max-width: 810px) {
      main.game {
        width: 747.14074px;
        margin: 0px auto; }
        main.game .gamecontainer {
          -moz-transform: scale(0.94815);
          -webkit-transform: scale(0.94815);
          -o-transform: scale(0.94815);
          -ms-transform: scale(0.94815);
          transform: scale(0.94815);
          -ms-transform-origin: top left;
          /* IE 9 */
          -webkit-transform-origin: top left;
          /* Chrome, Safari, Opera */
          transform-origin: top left;
          margin-left: 0px; } }
    @media (max-width: 767px) {
      main.game {
        width: 700.44444px; }
        main.game .gamecontainer {
          -moz-transform: scale(0.88889);
          -webkit-transform: scale(0.88889);
          -o-transform: scale(0.88889);
          -ms-transform: scale(0.88889);
          transform: scale(0.88889);
          -ms-transform-origin: top left;
          /* IE 9 */
          -webkit-transform-origin: top left;
          /* Chrome, Safari, Opera */
          transform-origin: top left; } }
    @media (max-width: 720px) {
      main.game {
        width: 671.25926px; }
        main.game .gamecontainer {
          -moz-transform: scale(0.85185);
          -webkit-transform: scale(0.85185);
          -o-transform: scale(0.85185);
          -ms-transform: scale(0.85185);
          transform: scale(0.85185);
          -ms-transform-origin: top left;
          /* IE 9 */
          -webkit-transform-origin: top left;
          /* Chrome, Safari, Opera */
          transform-origin: top left; } }
    @media (max-width: 690px) {
      main.game {
        width: 486.41975px; }
        main.game .gamecontainer {
          -moz-transform: scale(0.61728);
          -webkit-transform: scale(0.61728);
          -o-transform: scale(0.61728);
          -ms-transform: scale(0.61728);
          transform: scale(0.61728);
          -ms-transform-origin: top left;
          /* IE 9 */
          -webkit-transform-origin: top left;
          /* Chrome, Safari, Opera */
          transform-origin: top left; } }
    @media (max-width: 640px) {
      main.game {
        width: 581.75802px; }
        main.game .gamecontainer {
          -moz-transform: scale(0.73827);
          -webkit-transform: scale(0.73827);
          -o-transform: scale(0.73827);
          -ms-transform: scale(0.73827);
          transform: scale(0.73827);
          -ms-transform-origin: top left;
          /* IE 9 */
          -webkit-transform-origin: top left;
          /* Chrome, Safari, Opera */
          transform-origin: top left; } }
    @media (max-width: 598px) {
      main.game {
        width: 466.96296px; }
        main.game .gamecontainer {
          -moz-transform: scale(0.59259);
          -webkit-transform: scale(0.59259);
          -o-transform: scale(0.59259);
          -ms-transform: scale(0.59259);
          transform: scale(0.59259);
          -ms-transform-origin: top left;
          /* IE 9 */
          -webkit-transform-origin: top left;
          /* Chrome, Safari, Opera */
          transform-origin: top left; } }
    @media (max-width: 568px) {
      main.game {
        width: 408.59259px; }
        main.game .gamecontainer {
          -moz-transform: scale(0.51852);
          -webkit-transform: scale(0.51852);
          -o-transform: scale(0.51852);
          -ms-transform: scale(0.51852);
          transform: scale(0.51852);
          -ms-transform-origin: top left;
          /* IE 9 */
          -webkit-transform-origin: top left;
          /* Chrome, Safari, Opera */
          transform-origin: top left; } }
    @media (max-width: 480px) {
      main.game {
        width: 369.67901px; }
        main.game .gamecontainer {
          -moz-transform: scale(0.46914);
          -webkit-transform: scale(0.46914);
          -o-transform: scale(0.46914);
          -ms-transform: scale(0.46914);
          transform: scale(0.46914);
          -ms-transform-origin: top left;
          /* IE 9 */
          -webkit-transform-origin: top left;
          /* Chrome, Safari, Opera */
          transform-origin: top left; } }

section.termspopup {
  padding: 10px; }
  section.termspopup p {
    font-size: 14px;
    font-family: 'Roboto', sans-serif; }
    section.termspopup p.in {
      padding-left: 20px; }

/* BS override */
.tooltip .tooltip-inner {
  color: #282780;
  background-color: white; }
.tooltip.top .tooltip-arrow {
  border-top-color: white; }

@media (max-width: 768px) {
  .menu {
    padding-left: 2%;
    padding-right: 2%; }
    .menu .menubutton {
      font-size: 24px;
      max-width: 22%; }

  .roundedbutton {
    margin-bottom: 20px; }
    .roundedbutton.tworow {
      line-height: 24px; }

  main h1, main h2 {
    margin-left: 20px;
    margin-right: 20px; }
  main .prizes img {
    max-width: 140px; }
    main .prizes img.mainprize {
      max-width: 180px; }
  main .regform label {
    margin-left: 0px; }
  main .regform .checkbox {
    margin-left: 0px; }
  main .bg {
    padding-left: 2%;
    padding-right: 2%;
    background-size: 96%; }
  main .codesection {
    width: 90%;
    margin-left: auto;
    margin-right: auto; }
    main .codesection .lead {
      float: none;
      clear: both;
      width: 100%; }
    main .codesection .codes {
      float: none;
      clear: both;
      width: 280px;
      max-width: 280px;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 30px; }
  main .codelist {
    display: block;
    width: 300px;
    margin: 0px auto;
    padding-bottom: 100px; }
    main .codelist .cell-code, main .codelist .cell-button {
      display: block;
      width: 280px;
      height: auto;
      margin: 10px;
      text-align: center;
      padding-left: 0px; }
      main .codelist .cell-code .roundedbutton, main .codelist .cell-button .roundedbutton {
        font-size: 16px;
        padding-top: 10px;
        padding-bottom: 10px;
        margin: 10px; }
    main .codelist .cell-code {
      margin-top: 30px; }
    main .codelist .cell-button .info {
      margin-top: 20px; }
  main h4.tag {
    display: block;
    width: 300px;
    margin-left: auto;
    margin-right: auto;
    text-align: center; }
  main .scorerow {
    display: block; }
    main .scorerow .profile {
      width: 90%;
      max-width: 90%;
      margin: 10px auto; }
    main .scorerow .dotted-vertical {
      display: none; }
    main .scorerow .scores {
      width: 400px;
      max-width: 400px;
      margin: 30px auto; }
      main .scorerow .scores h3 {
        text-align: center; }
      main .scorerow .scores .results td.title.big {
        height: 100px; }
  main .resultlist {
    font-size: 21px; }
    main .resultlist .rounded {
      font-size: 21px; }
  main .prizecol {
    text-align: center; }
    main .prizecol img {
      display: inline-block;
      margin-bottom: 10px; }
  main .lottery {
    margin-top: 20px;
    margin-bottom: 50px; } }
@media (max-width: 480px) {
  .menu {
    padding-left: 1%;
    padding-right: 1%; }
    .menu .menubutton {
      font-size: 18px;
      max-width: 24%; }

  main {
    min-height: 720px; }
    main.register {
      padding-bottom: 50px; }
    main h1 {
      font-size: 30px; }
    main .prizes {
      margin-bottom: 40px; }
      main .prizes img {
        display: block;
        margin: 10px auto;
        max-width: 200px; }
        main .prizes img.mainprize {
          max-width: 280px; }
    main .bg {
      padding-left: 1%;
      padding-right: 1%;
      background-size: 98%; }
    main .boardimage {
      margin: 10px 0px 50px 0px; }
      main .boardimage img {
        max-width: 300px; }
    main .fb-like, main .fb-like span, main .fb-like span iframe[style] {
      width: 90% !important; }
    main .resultlist {
      font-size: 14px; }
      main .resultlist figure {
        margin: 15px 15px 15px 0px; }
      main .resultlist .rounded {
        width: 100px;
        font-size: 14px; }
    main .scorerow .scores {
      width: 280px; }
      main .scorerow .scores .results td {
        vertical-align: top; }
        main .scorerow .scores .results td.title {
          padding-top: 5px;
          font-size: 14px; }
      main .scorerow .scores .results .rounded {
        width: 80px;
        margin-left: 0px;
        font-size: 14px; } }
/* lansdscape ONLY */
@media only screen and (min-device-width: 320px) and (max-device-width: 1024px) and (orientation: portrait) {
  html.game, body.game {
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden; }

  div.landscapeonly {
    display: block !important;
    position: fixed;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    z-index: 11111;
    background-color: rgba(0, 0, 0, 0.8); }
    div.landscapeonly p {
      text-align: center;
      color: white;
      font-size: 30px; }
      div.landscapeonly p span {
        font-size: 42px; } }
/* overlay  */
.overlay {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background: url(../img/bg_black35.png) center center repeat; }
  .overlay .container {
    /* FF1+ */
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px;
    /* Saf3-4, iOS 1+, Android 1.5+ */
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    /* Opera 10.5, IE9, Saf5, Chrome, FF4 */
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    /* useful if you don't want a bg color from leaking outside the border: */
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    position: relative;
    width: 90%;
    max-width: 729px;
    margin-left: auto;
    margin-right: auto;
    padding: 30px;
    margin-top: 335px;
    background-color: white; }
  .overlay h3 {
    color: #282780;
    font-size: 24px;
    text-align: left;
    margin-bottom: 50px; }
  .overlay p {
    color: #282780;
    margin: 0px 0px 20px 0px; }
  .overlay .arrow {
    background-image: url(../img/sprite_gameboard_elements.png?v5);
    background-repeat: no-repeat;
    /* half of sprite size  */
    background-size: 690px 736px;
    width: 46px;
    height: 46px;
    margin: 20px auto; }
    .overlay .arrow.up {
      background-position: -460px 0px; }
    .overlay .arrow.down {
      background-position: -552px 0px; }
    .overlay .arrow.right {
      display: inline;
      padding: 13px 23px;
      margin: 20px;
      background-position: -506px 0px; }
  .overlay .change {
    /* FF1+ */
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    /* Saf3-4, iOS 1+, Android 1.5+ */
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    /* Opera 10.5, IE9, Saf5, Chrome, FF4 */
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    /* useful if you don't want a bg color from leaking outside the border: */
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    color: white;
    padding: 8px 12px;
    margin-right: 20px;
    background-color: #282780; }
  .overlay .movements {
    margin-top: 50px;
    color: #282780; }
  .overlay .cell {
    background-image: url(../img/sprite_gameboard_elements.png?v5);
    background-repeat: no-repeat;
    /* half of sprite size  */
    background-size: 690px 736px;
    width: 92px;
    height: 92px;
    background-color: #62d5f3;
    background-position: -460px -40px; }
  .overlay .cls {
    /* FF1+ */
    -moz-border-radius-topleft: 16px;
    -moz-border-radius-topright: 16px;
    -moz-border-radius-bottomright: 16px;
    -moz-border-radius-bottomleft: 16px;
    /* Saf3-4, iOS 1+, Android 1.5+ */
    -webkit-border-top-left-radius: 16px;
    -webkit-border-top-right-radius: 16px;
    -webkit-border-bottom-right-radius: 16px;
    -webkit-border-bottom-left-radius: 16px;
    /* Opera 10.5, IE9, Saf5, Chrome, FF4 */
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
    border-bottom-left-radius: 16px;
    /* useful if you don't want a bg color from leaking outside the border: */
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    position: absolute;
    z-index: 100;
    top: 10px;
    right: 10px;
    display: block;
    width: 32px;
    height: 32px;
    text-align: center;
    line-height: 32px;
    font-size: 24px;
    color: white;
    background-color: #282780; }
    .overlay .cls:hover {
      text-decoration: none; }
    .overlay .cls .glyphicon {
      top: 4px; }

@media (max-width: 768px) {
  .overlay .cls {
    width: 24px;
    height: 24px;
    line-height: 26px;
    font-size: 16px; }
    .overlay .cls .glyphicon {
      top: 2px; }
  .overlay h3 {
    font-size: 20px;
    margin-bottom: 20px; }
  .overlay .container {
    margin-top: 300px; }
  .overlay .movements {
    margin: 0px auto 20px auto;
    font-size: 12px; }
  .overlay .roundedbutton {
    font-size: 20px; } }
@media (max-width: 480px) {
  .overlay .movements {
    -moz-transform: scale(0.8);
    -webkit-transform: scale(0.8);
    -o-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
    -ms-transform-origin: top left;
    /* IE 9 */
    -webkit-transform-origin: top left;
    /* Chrome, Safari, Opera */
    transform-origin: top left;
    font-size: 12px;
    margin-top: -20px;
    margin-left: -40px; }
    .overlay .movements .cell {
      -moz-transform: scale(0.5);
      -webkit-transform: scale(0.5);
      -o-transform: scale(0.5);
      -ms-transform: scale(0.5);
      transform: scale(0.5);
      -ms-transform-origin: top left;
      /* IE 9 */
      -webkit-transform-origin: top left;
      /* Chrome, Safari, Opera */
      transform-origin: top left; }
  .overlay .container {
    margin-top: 100px; }
  .overlay .change {
    display: inline-block; } }