/**
 * Variables
 */
/**
 * Functions
 */
/**
 * Mixins
 */
html:not(.isfullscreen) {
  /**
     * Game
     */
}
@font-face {
  font-family: "Grandstander";
  src: url("Grandstander-clean.ttf");
  font-style: normal;
  font-weight: 400;
}
html:not(.isfullscreen) #site.fs {
  overflow: hidden;
  background-color: #9CDCF9;
}
html:not(.isfullscreen) #site.fs .sponsors, html:not(.isfullscreen) #site.fs .nav, html:not(.isfullscreen) #site.fs footer {
  z-index: 0;
  display: none;
}
html:not(.isfullscreen) #site.fs .game {
  height: 100vh;
  width: 100vw;
  background: none;
}
html:not(.isfullscreen) #site.fs #game-frame {
  padding: 0;
  border: 0;
  height: 100vh;
  width: 100%;
  max-width: 200vh;
  margin: 0 auto;
}
html:not(.isfullscreen) #site.fs .site-nav {
  display: none;
}
html:not(.isfullscreen) #site.fs .content {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100vw;
  height: 100vh;
  transform: none;
  z-index: 10001;
  max-width: 100vw;
  max-height: 100vh;
  margin: 0 auto;
  padding: 0;
}
html:not(.isfullscreen) #site.fs .content .controls {
  z-index: 1001;
  right: 0;
  top: 0;
  height: 50px;
  width: 100%;
  text-align: left;
  display: block;
  padding: 0;
}
html:not(.isfullscreen) #site.fs .content .audio i, html:not(.isfullscreen) #site.fs .content .fullscreen i {
  top: 10px;
}
html:not(.isfullscreen) #site.fs .content #game-container {
  border: none;
  z-index: 0;
  width: 100%;
  max-width: 100vw;
  margin-top: 50px;
  background: none;
}
html:not(.isfullscreen) #site.fs .content #gameoverlay {
  height: calc(100% + 50px);
  border: none;
}
html:not(.isfullscreen) #site.fs .content .suremessage {
  height: 1.75em;
}
@media (min-width: 1000px) {
  html:not(.isfullscreen) #site.fs .content #suredialog {
    height: 25vw;
  }
}
@media screen and (min-aspect-ratio: 2) {
  html:not(.isfullscreen) #site.fs .content #game-border {
    height: calc(100vh - 50px);
  }
  html:not(.isfullscreen) #site.fs .content #suredialog {
    height: 60%;
    min-height: 70vh;
    font-size: 9vh;
  }
}
@media screen and (max-aspect-ratio: 2) {
  html:not(.isfullscreen) #site.fs .content #game-border {
    height: calc(100vh - 50px);
    width: 100vw;
  }
  html:not(.isfullscreen) #site.fs .content #suredialog {
    height: 60%;
  }
}
@media screen and (max-aspect-ratio: 1.3333333333) {
  html:not(.isfullscreen) #site.fs .content #game-border {
    height: calc(76vw - 50px);
    width: 100vw;
  }
  html:not(.isfullscreen) #site.fs .content #suredialog {
    height: 60%;
    font-size: 5vw;
  }
}
html:not(.isfullscreen) body, html:not(.isfullscreen) html {
  margin: 0;
  padding: 0;
  background: linear-gradient(to bottom, #afcee0 75%, #15456e 25%);
  font-family: 'Muli', sans-serif;
  font-weight: 400;
  font-size: 12px;
}
html:not(.isfullscreen) main {
  background-image: url(../static/games/bg-games.jpg);
  background-repeat: no-repeat;
  background-size: 2000px 1113px;
  padding-top: 1px;
  height: 670px;
  min-height: 670px;
}
@media (max-width: 530px) {
  html:not(.isfullscreen) main {
    min-height: 0;
    height: 630px;
  }
}
html:not(.isfullscreen) .content {
  max-width: 580px;
  width: 90%;
  max-height: 563px;
  top: 196px;
}
@media (min-width: 820px) {
  html:not(.isfullscreen) .content {
    top: 420px;
  }
}
@media (min-width: 850px) {
  html:not(.isfullscreen) .content {
    max-width: 620px;
  }
}
@media (max-width: 530px) {
  html:not(.isfullscreen) .content {
    max-width: 400px;
  }
}
html:not(.isfullscreen) #game-border {
  position: relative;
  margin: 0 auto;
}
html:not(.isfullscreen) .controls {
  position: absolute;
  right: 0;
  top: -80px;
  z-index: 999;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html:not(.isfullscreen) .controls li {
  margin-left: 15px;
  display: inline-block;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html:not(.isfullscreen) .controls a {
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  border-radius: 100%;
  box-shadow: 0 0 30px 7px #fff;
  outline: none;
  border: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html:not(.isfullscreen) .controls .audio i, html:not(.isfullscreen) .controls .fullscreen i {
  cursor: pointer;
  position: relative;
  display: inline-block;
  background-repeat: no-repeat;
  top: 30px;
  width: 51px;
  height: 42px;
  text-indent: 0;
  background-image: url(../static/games/btn-game-states-2x.png);
  background-size: 200%;
}
html:not(.isfullscreen) .controls .audio.music i {
  background-image: url(../static/games/btn-game-audio-2x.png);
}
html:not(.isfullscreen) .controls .audio i, html:not(.isfullscreen) .controls .audio.unmuted i {
  font-size: 20px;
  background-position: 100% 0;
}
html:not(.isfullscreen) .controls .audio i:hover, html:not(.isfullscreen) .controls .audio.unmuted i:hover {
  animation: depress 300ms;
}
html:not(.isfullscreen) .controls .audio.muted i {
  background-position: 100% 99%;
}
html:not(.isfullscreen) .controls .fullscreen i {
  background-position: 0 0;
}
html:not(.isfullscreen) .controls .fullscreen i:hover {
  background-position: 0 99%;
  animation: depress 500ms;
}
html:not(.isfullscreen) .controls .audio.vo i, html:not(.isfullscreen) .controls .audio.vo.unmuted i {
  background-position: 0 0;
  background-image: url(../static/games/btn-game-audio-2x.png);
}
html:not(.isfullscreen) .controls .audio.vo.muted i {
  background-position: 0 99%;
}
@media (max-width: 640px) {
  html:not(.isfullscreen) .controls .audio i, html:not(.isfullscreen) .controls .fullscreen i {
    top: 36px;
    width: 46px;
    height: 38px;
    background-size: 200%;
  }
}
html:not(.isfullscreen) #game {
  text-align: center;
  font-size: 0;
  -webkit-user-select: none;
}
html:not(.isfullscreen) #game #game-container {
  position: relative;
  border: 25px solid;
  border-image: url(../static/custom-border.png) 35 round;
  background-color: #296A0A;
  z-index: 1000;
  width: 100%;
  max-width: 580px;
  height: 100%;
  min-height: 228px;
}
@media (min-width: 461px) {
  html:not(.isfullscreen) #game #game-container {
    min-height: 250px;
  }
}
@media (min-width: 531px) {
  html:not(.isfullscreen) #game #game-container {
    min-height: 315px;
    max-width: 580px;
  }
}
@media (min-width: 600px) {
  html:not(.isfullscreen) #game #game-container {
    min-height: 315px;
    max-width: 580px;
  }
}
@media (min-width: 850px) {
  html:not(.isfullscreen) #game #game-container {
    min-height: 335px;
    max-width: 660px;
  }
}
@media (max-width: 375px) {
  html:not(.isfullscreen) #game #game-container {
    border-width: 10px;
    min-height: 210px;
  }
}
html:not(.isfullscreen) button {
  cursor: pointer;
}
html:not(.isfullscreen) #gameoverlay {
  z-index: 1011;
  position: absolute;
  font-family: "Grandstander";
  border: 25px solid;
  border-image: url(../static/custom-border.png) 35 round;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  background-color: black;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 375px) {
  html:not(.isfullscreen) #gameoverlay {
    border-width: 10px;
  }
}
html:not(.isfullscreen) #gameoverlay.sure {
  background-color: rgba(20, 20, 20, 0.8);
}
html:not(.isfullscreen) #loading {
  color: white;
  position: absolute;
  top: 0;
  font-size: 5vh;
  left: 0;
  width: 100%;
  height: 100%;
}
html:not(.isfullscreen) #loading img {
  width: 100%;
  height: auto;
}
html:not(.isfullscreen) #loading > div {
  width: 50%;
  margin: 20% auto;
}
html:not(.isfullscreen) #suredialog {
  position: relative;
  width: 40%;
  padding: 0.8em;
  background-image: url("../static/games/missionBox.png");
  background-size: 100%;
  background-repeat: no-repeat;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-items: center;
  height: 60%;
  font-size: 35px;
}
@media (max-width: 600px) {
  html:not(.isfullscreen) #suredialog {
    font-size: 5vw;
    height: 25vw;
  }
}
html:not(.isfullscreen) #suredialog > div {
  height: 35%;
  font-size: 100%;
}
html:not(.isfullscreen) .suremessage {
  pointer-events: none;
  margin-top: 0.25em;
  line-height: 1em;
}
html:not(.isfullscreen) #suredialog button {
  padding: 0;
  margin: 0;
  width: 40%;
  background: none;
  border: none;
  -webkit-appearance: none;
}
html:not(.isfullscreen) #suredialog button > img {
  width: 100%;
  height: auto;
}
html:not(.isfullscreen) #closebutton {
  display: block;
  position: absolute;
  width: 6.67%;
  min-width: 40px;
  top: 25px;
  right: 25px;
  border: 0;
  margin: 0;
  padding: 0;
  background: none;
  z-index: 1010;
}
@media (max-width: 375px) {
  html:not(.isfullscreen) #closebutton {
    right: 10px;
    top: 10px;
  }
}
html:not(.isfullscreen) #closebutton img {
  width: 100%;
  height: auto;
}
html:not(.isfullscreen) #game-frame {
  width: 100%;
  height: 100%;
  position: relative;
  max-width: 620px;
}
html:not(.isfullscreen) #game-frame:fullscreen #game-container, html:not(.isfullscreen) #game-frame:fullscreen #gameoverlay {
  border: none;
  min-height: 100vh;
  min-width: 100vw;
}
html:not(.isfullscreen) #game-frame:fullscreen #suredialog {
  height: 40vh;
  width: 52vh;
  font-size: 6vh;
}
html:not(.isfullscreen) #game-frame:-webkit-full-screen, html:not(.isfullscreen) #game-frame:-webkit-full-screen #game-container, html:not(.isfullscreen) #game-frame:-webkit-full-screen .content, html:not(.isfullscreen) #game-frame:-webkit-full-screen #gameoverlay {
  border: none;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  min-width: 100vw;
  max-height: 100vh;
  max-width: 100vw;
}
html:not(.isfullscreen) #game-frame:-webkit-full-screen #game-container {
  background-color: #9CDCF9;
}
html:not(.isfullscreen) #game-frame:-webkit-full-screen .controls {
  display: none;
}
html:not(.isfullscreen) #game-frame:-webkit-full-screen #suredialog {
  height: 40vh;
  width: 52vh;
  font-size: 6vh;
}
html:not(.isfullscreen) .hidden {
  display: none !important;
}