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-size: 100%;
  font: inherit;
  vertical-align: baseline; }

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

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

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

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

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

#og-game-holder {
  width: 100%;
  max-width: 1024px;
  height: auto;
  margin: 20px auto; }
  @media screen and (max-height: 900px) {
    #og-game-holder {
      max-width: 900px; } }
  @media screen and (max-height: 801px) {
    #og-game-holder {
      max-width: 810px; } }
  @media screen and (max-height: 701px) {
    #og-game-holder {
      max-width: 600px; } }
  #og-game-holder canvas {
    width: 100%;
    border: 10px solid #001826; }

body {
  background-image: url(../assets/images/tile.png);
  background-color: #002635;
  background-repeat: repeat; }

.container {
  padding: 0; }

textarea {
  display: none; }

@font-face {
  font-family: 'Gilroy Heavy Italic';
  src: url("../assets/fonts/gilroy/32577D_0_0.eot");
  src: url("../assets/fonts/gilroy/32577D_0_0.eot?#iefix") format("embedded-opentype"), url("../assets/fonts/gilroy/32577D_0_0.woff2") format("woff2"), url("../assets/fonts/gilroy/32577D_0_0.woff") format("woff"), url("../assets/fonts/gilroy/32577D_0_0.ttf") format("truetype"); }
@font-face {
  font-family: 'Gilroy Heavy';
  src: url("../assets/fonts/gilroy/32577D_1_0.eot");
  src: url("../assets/fonts/gilroy/32577D_1_0.eot?#iefix") format("embedded-opentype"), url("../assets/fonts/gilroy/32577D_1_0.woff2") format("woff2"), url("../assets/fonts/gilroy/32577D_1_0.woff") format("woff"), url("../assets/fonts/gilroy/32577D_1_0.ttf") format("truetype"); }
@font-face {
  font-family: "House Slant";
  src: url("../assets/fonts/houseslant/HouseSlant.eot");
  src: url("../assets/fonts/houseslant/HouseSlant.eot?#iefix") format("embedded-opentype"), url("../assets/fonts/houseslant/HouseSlant.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-stretch: normal; }
/*@font-face {
  font-family: 'Arvo';
  font-style: normal;
  font-weight: 400;
  src: local('Arvo'), url('https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}*/
@font-face {
  font-family: 'Arvo';
  src: url("../assets/fonts/arvo/arvo-regular-webfont.eot");
  src: url("../assets/fonts/arvo/arvo-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../assets/fonts/arvo/arvo-regular-webfont.woff2") format("woff2"), url("../assets/fonts/arvo/arvo-regular-webfont.woff") format("woff"), url("../assets/fonts/arvo/arvo-regular-webfont.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; }
.fontloader {
  text-indent: -9000px;
  visibility: hidden; }

.gilroy {
  font-family: "Gilroy Heavy"; }

.gilroy-italic {
  font-family: "Gilroy Heavy Italic"; }

.slant {
  font-family: "House Slant"; }

.arvo {
  font-family: 'Arvo', serif; }

.not-found {
  background: #002635;
  margin: 20px auto;
  padding: 40px;
  text-align: center;
  font-size: 26px;
  font-family: 'Arvo';
  text-transform: uppercase;
  color: white;
  max-width: 1024px; }
  .not-found p {
    padding: 10px 0; }
  .not-found .whoops {
    max-width: 1024px; }
  .not-found a {
    color: white; }
  .not-found img {
    width: 100%; }
    .not-found img.back {
      max-width: 400px; }

.container .joinroom h1 {
  font-size: 80px;
  font-family: "Gilroy Heavy Italic";
  color: #004B7B;
  text-align: center; }
  .container .joinroom h1 img {
    width: 100%;
    max-width: 300px; }

.subtitle {
  color: #FF2E47;
  text-transform: uppercase;
  font-size: 44px;
  text-align: center;
  font-family: "House Slant"; }

.overlayOuter {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; }

.overlayInner {
  position: absolute;
  width: 80%;
  top: 15%;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 0;
  max-width: 800px; }

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  padding-top: 25px;
  height: 0; }

.videoWrapper video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

.linkback {
  text-align: center; }

.linkback a {
  color: white;
  text-decoration: none;
  font-size: 14px; }
  .linkback a:hover {
    text-decoration: underline; }

.form-holder {
  max-width: 1024px;
  height: auto;
  margin: 20px auto;
  padding: 20px 0 40px;
  border: 10px solid #001826;
  background: #fefef3; }
  @media screen and (max-height: 900px) {
    .form-holder {
      max-width: 900px;
      padding: 20px 0; } }
  @media screen and (max-height: 801px) {
    .form-holder {
      max-width: 810px;
      padding: 20px 0; } }
  .form-holder form input[type="text"],
  .form-holder form input[type="number"] {
    height: 250px;
    width: 100%;
    font-family: "Gilroy Heavy";
    font-size: 170px;
    text-transform: uppercase;
    text-align: center;
    outline: none;
    border: 0;
    color: #00487B;
    background-color: #fefef3;
    display: block;
    margin: 0 auto;
    max-width: 500px; }
    @media screen and (max-width: 600px) {
      .form-holder form input[type="text"],
      .form-holder form input[type="number"] {
        font-size: 100px;
        max-width: 330px; } }
  .form-holder form input[type="submit"] {
    width: 100%;
    max-width: 353px;
    min-height: 125px;
    border: 0;
    background: url(../assets/images/btn_joinscreen.png) no-repeat;
    background-size: 100% 100%;
    padding: 0;
    outline: none;
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    color: #fff;
    display: block;
    margin: 0 auto;
    margin-top: 20px; }
    .form-holder form input[type="submit"]:hover {
      background: url(../assets/images/btn_joinscreen_hover.png) no-repeat;
      background-size: 100% 100%; }
    .form-holder form input[type="submit"]:disabled {
      background: url(../assets/images/btn_joinscreen_inactive.png) no-repeat;
      background-size: 100% 100%; }
  .form-holder form input[type=number]::-webkit-inner-spin-button,
  .form-holder form input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0; }