html, body {
  height: 100%; }

body {
  background: #201117;
  margin: 0;
  padding: 0; }

h1 {
  margin: 0; }

ul {
  list-style: none;
  padding: 0;
  margin: 0; }

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

#inputContainer > input {
  border: 0px solid;
  color: #FFFFFF;
  background-color: transparent;
  position: absolute;
  width: 29%;
  height: 5%;
  font-size: 20px; }

#inputContainer > input:focus {
  outline: none; }

.cookie {
  display: none;
  background: #13080c;
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 0;
  font-family: 'arcadepixregular';
  padding: 20px 0 30px;
  z-index: 1000; }
  .cookie .container {
    position: relative;
    width: 1140px;
    margin: 0 auto; }
    @media (max-width: 1139px) {
      .cookie .container {
        width: 980px; } }
  .cookie p {
    line-height: 1.375;
    color: #fff;
    margin-bottom: 30px; }
    .cookie p a {
      color: #ff8c2f; }
  .cookie .btn-close {
    display: inline-block;
    color: #fff;
    padding: 12px 20px;
    border: 3px solid #fff;
    border-radius: 3px;
    text-decoration: none; }

.index {
  position: relative;
  width: 100%;
  color: #fff;
  font-family: 'arcadepixregular'; }
  .index .container {
    position: relative;
    width: 1140px;
    margin: 0 auto; }
    @media (max-width: 1139px) {
      .index .container {
        width: 980px; } }
  .index .top {
    background: url(../img/bg-home-top.jpg) center top no-repeat #211219;
    background-size: 100%;
    position: relative;
    width: 100%; }
  .index .content {
    background: url(../img/bg-home-content.jpg) center top no-repeat;
    width: 100%;
    height: 4830px; }
  .index a {
    color: #fff; }
  .index p {
    line-height: 1.375; }
  .index header {
    position: absolute;
    bottom: 20%;
    left: 0;
    width: 100%;
    text-align: center; }
    .index header h1 {
      font-size: 50px;
      text-transform: uppercase;
      margin-bottom: 40px; }
      .index header h1 span {
        display: block;
        font-size: 16px;
        text-transform: normal;
        margin-top: 40px; }
    .index header .btn-start {
      background: url(../img/btn-start.png);
      display: inline-block;
      width: 282px;
      height: 63px; }
    .index header .btn-read-story {
      position: relative;
      display: inline-block;
      font-size: 16px;
      margin-top: 30px;
      margin-left: -60px; }
      .index header .btn-read-story:after {
        background: url(../img/arrow-down.png);
        background-size: cover;
        position: absolute;
        top: -13px;
        right: -55px;
        width: 40px;
        height: 40px;
        content: ''; }
  .index .so-far {
    position: absolute;
    width: 100%;
    top: -23px;
    left: 0; }
    .index .so-far h2 {
      font-size: 45px;
      text-align: center; }
    .index .so-far ul {
      text-align: center; }
    .index .so-far li {
      display: inline-block;
      width: 100px;
      margin-right: 100px; }
      .index .so-far li:last-child {
        margin-right: 0; }
      .index .so-far li span {
        display: block;
        color: #ff8c2f;
        margin-bottom: 10px; }
  .index .stories {
    position: absolute;
    top: 317px;
    left: 0;
    width: 100%; }
    .index .stories p {
      padding-right: 15px; }
    .index .stories .box-1 {
      position: absolute;
      width: 50%;
      top: 410px;
      right: 0; }
    .index .stories .box-2 {
      position: absolute;
      top: 650px;
      left: 0;
      width: 415px; }
      .index .stories .box-2 p {
        padding-left: 15px; }
  .index .game {
    position: absolute;
    width: 100%;
    top: 2760px;
    top: 1622px;
    left: 0; }
    .index .game p {
      color: #e0e0e0; }
    .index .game .box-1 {
      width: 395px; }
      .index .game .box-1 p {
        padding-left: 15px; }
    .index .game .box-2 {
      width: 395px;
      margin-top: 75px;
      margin-left: 150px; }
  .index .made {
    position: absolute;
    width: 100%;
    top: 3670px;
    top: 2532px;
    left: 0; }
    .index .made p {
      color: #201117; }
    .index .made .box-1 {
      width: 465px;
      padding-top: 20px; }
      .index .made .box-1 p {
        padding-left: 20px; }
    .index .made .box-2 {
      position: absolute;
      width: 50%;
      top: 70px;
      right: 0; }
      .index .made .box-2 p {
        padding-right: 15px; }
  .index .team {
    position: absolute;
    top: 3695px;
    top: 2557px;
    left: 0;
    width: 100%;
    height: 1040px;
    line-height: 1.2;
    color: #aaa78d;
    margin-top: 960px; }
    .index .team span {
      display: block;
      color: #ff8c2f; }
    .index .team div {
      position: absolute; }
    .index .team .nikola, .index .team .rozmy {
      text-align: right; }
    .index .team .rozmy {
      top: 208px;
      left: -35px; }
      @media (max-width: 1139px) {
        .index .team .rozmy {
          top: 340px;
          left: 82px;
          text-align: center; } }
    .index .team .bence {
      top: 143px;
      right: 140px; }
      @media (max-width: 1139px) {
        .index .team .bence {
          top: 143px;
          right: 60px; } }
    .index .team .nikola {
      top: 530px;
      left: 240px; }
      @media (max-width: 1139px) {
        .index .team .nikola {
          top: 530px;
          left: 165px; } }
    .index .team .laszlo {
      top: 474px;
      right: 20px; }
      @media (max-width: 1139px) {
        .index .team .laszlo {
          top: 595px;
          right: 123px;
          text-align: center; } }
    .index .team .additional-kudos {
      right: 15px;
      bottom: 40px;
      text-align: right; }
      .index .team .additional-kudos span {
        color: #fff;
        margin-bottom: 10px; }
  .index footer {
    background: url(../img/logo-mitostudio.png) no-repeat 0 30px;
    position: absolute;
    top: 5755px;
    top: 4617px;
    left: 0;
    padding-left: 200px; }
    .index footer .smaller {
      font-size: 10px;
      margin-top: 10px; }

.stat {
  background: url(../img/bg-stat.jpg) no-repeat top center #201117;
  position: relative;
  width: 100%;
  min-height: 1280px;
  color: #fff;
  font-family: 'arcadepixregular';
  font-size: 16px; }
  .stat .lead {
    width: 900px;
    overflow: hidden;
    font-size: 16px;
    line-height: 24px;
    padding-top: 395px;
    margin: 0 auto; }
    .stat .lead p {
      float: left;
      width: 500px;
      margin-left: 10px; }
  .stat .actions {
    width: 300px;
    float: right;
    text-align: center;
    margin-top: 10px; }
  .stat .btn-start {
    background: url(../img/btn-start.png);
    display: inline-block;
    width: 282px;
    height: 63px; }
  .stat .btn-read-story {
    display: inline-block;
    color: #fff;
    font-size: 16px;
    margin-top: 20px; }
  .stat .score {
    font-size: 90px;
    padding-top: 60px;
    text-align: center; }
  .stat .highscore {
    width: 400px;
    overflow: hidden;
    font-size: 22px;
    margin: 0 auto;
    padding-top: 10px;
    text-align: center; }
    .stat .highscore li {
      width: 200px;
      float: left;
      margin-bottom: 10px; }
      .stat .highscore li:nth-child(2n+2) {
        margin-right: 0; }
    .stat .highscore span {
      color: #ff8c2f; }
  .stat .meta {
    font-size: 30px;
    text-align: center;
    margin-top: 45px;
    margin-bottom: 45px; }
    .stat .meta li {
      display: inline-block; }
    .stat .meta span {
      color: #ff8c2f; }
    .stat .meta.medals {
      margin-left: -80px; }
      .stat .meta.medals li {
        margin-left: 80px; }
      .stat .meta.medals span {
        display: block; }
  .stat .ico-medals {
    background: url(../img/ico-medals.png) no-repeat;
    display: inline-block;
    width: 54px;
    height: 87px; }
    .stat .ico-medals.ico-medals-accuracy {
      background-position: 0 0; }
    .stat .ico-medals.ico-medals-kills {
      background-position: -210px 0; }
    .stat .ico-medals.ico-medals-streaks {
      background-position: -420px 0; }

.credits {
  position: relative;
  width: 100%;
  color: #fff;
  font-family: 'arcadepixregular'; }
  .credits .top {
    background: url(../img/bg-home-top.jpg) center top no-repeat #211219;
    background-size: 100%;
    position: relative;
    width: 100%; }
    .credits .top:after {
      background: url(../img/arrow-down.png);
      background-size: cover;
      position: absolute;
      bottom: 15%;
      left: 50%;
      width: 70px;
      height: 70px;
      content: '';
      margin-left: -35px; }
  .credits .container {
    position: relative;
    width: 1140px;
    margin: 0 auto; }
    @media (max-width: 1139px) {
      .credits .container {
        width: 980px; } }
  .credits a {
    color: #ff8c2f; }
  .credits p {
    line-height: 1.375; }
  .credits header {
    position: absolute;
    left: 0;
    bottom: 30%;
    width: 100%;
    text-align: center; }
    .credits header h1 {
      font-size: 50px;
      text-transform: uppercase;
      margin-bottom: 40px; }
  .credits footer {
    padding: 50px 0 50px;
    background: #311b28; }
    .credits footer .container {
      box-sizing: border-box;
      padding-left: 200px;
      background: url(../img/logo-mitostudio.png) no-repeat 0 10px; }
    .credits footer a {
      color: #fff; }
    .credits footer .smaller {
      font-size: 10px;
      margin-top: 10px; }
  .credits h2, .credits h3 {
    line-height: 1.375;
    font-size: 45px;
    margin-bottom: 40px; }
  .credits h3 {
    font-size: 35px; }
  .credits .vertical-list {
    margin-bottom: 70px; }
    .credits .vertical-list li {
      font-size: 18px;
      margin-bottom: 10px; }
      .credits .vertical-list li span {
        color: #ff8c2f;
        margin-bottom: 10px; }
  .credits .text {
    margin-bottom: 100px; }
    .credits .text h3 {
      margin-bottom: 40px; }