/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
@import url(../fonts/Open%20Sans/OpenSans.css);
@import url(../fonts/Open%20Sans/OpenSans-Semibold.css);
@import url(../fonts/Vista%20Slab%20OTCE%20Reg/VistaSlabOTCE-Bold.css);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline; }

html {
  line-height: 1; }

ol, ul {
  list-style: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle; }

q, blockquote {
  quotes: none; }
  q:before, q:after, blockquote:before, blockquote:after {
    content: "";
    content: none; }

a img {
  border: none; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block; }

p, li, a, h1, h2 {
  font-family: "OpenSans", arial, sans-serif;
  color: #272727;
  font-size: 0.9em;
  line-height: 1.7em; }

h1, p, h2 {
  margin: 20px auto; }

img {
  max-width: 100%; }

section > .inner, .row > .inner {
  max-width: 1100px;
  margin: auto;
  padding: 0 20px;
  overflow: hidden; }

.gradient, .header, .outro {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjcwMHB4IiBjeT0iNzAwcHgiIHI9IjcwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM2NmI1ZTgiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDg0ZDgiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background-size: 100%;
  background-image: -moz-radial-gradient(700px 700px, #66b5e8 0%, #0084d8 700px);
  background-image: -webkit-radial-gradient(700px 700px, #66b5e8 0%, #0084d8 700px);
  background-image: radial-gradient(700px 700px, #66b5e8 0%, #0084d8 700px); }

.top .logo {
  margin: 15px 0;
  width: 150px; }
  @media (min-width: 700px) {
    .top .logo {
      float: left; } }
.top .social {
  margin: 20px 0;
  display: flex;
  justify-content: center; }
  @media (min-width: 700px) {
    .top .social {
      float: right; } }
  .top .social li {
    line-height: 20px;
    margin: 0 10px; }

.header p {
  max-width: 750px;
  color: #fff;
  text-align: center; }

.games .row:nth-child(2n) {
  background-color: #fafafa; }
.games .row > .inner {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  text-align: center;
  flex-wrap: wrap; }
  @media (min-width: 700px) {
    .games .row > .inner {
      flex-wrap: nowrap; } }
.games .row .game {
  margin: 0 10px;
  width: calc(100% / 2 - 20px); }
  .games .row .game h2 {
    margin: 20px 0 10px; }
  .games .row .game img {
    margin: 10px auto 20px;
    display: block; }

.chart {
  background-color: #fafafa; }
  .chart h2 {
    font-family: "VistaSlabOTCEReg", times, serif;
    color: #41acff;
    font-size: 2em;
    line-height: 1.4em;
    text-align: center; }
  .chart .games {
    margin: 40px 0; }
    @media (min-width: 700px) {
      .chart .games {
        columns: 2; } }
    .chart .games .game {
      display: flex;
      align-items: center;
      line-height: 30px;
      margin: 0 0 10px; }
      .chart .games .game .title {
        width: 40%;
        text-align: right;
        line-height: 16px; }
      .chart .games .game .percent {
        margin-left: 10px;
        width: 50%;
        height: 30px;
        background-color: #E0E2E1;
        position: relative; }
        .chart .games .game .percent .green {
          position: absolute;
          background-color: green;
          background-image: url("../img/bg.png");
          height: 30px;
          width: 10%; }
        .chart .games .game .percent .num {
          float: right;
          margin-right: 10px; }
          .chart .games .game .percent .num:after {
            content: "%"; }

.outro p {
  max-width: 800px;
  text-align: center;
  font-size: 1.1em;
  color: #fff;
  margin: 20px auto; }
  .outro p a {
    text-decoration: underline;
    color: inherit; }

.footer {
  text-align: center; }
  .footer .social {
    display: flex;
    justify-content: center; }
    .footer .social img {
      margin: 0 10px; }
  .footer .small {
    font-size: 0.7em;
    margin: 40px 0 20px; }