@import url(https://fonts.googleapis.com/css?family=Rambla:400,700,400italic,700italic);
@import url(https://fonts.googleapis.com/css?family=Bitter:400,700);
@import url(fontello/css/fontello.css);
body {
  font-family: 'Rambla', sans-serif;
  font-weight: 400;
  font-size: 16px;
  background-color: #281233;
  background-image: url("../img/trails.svg");
  background-size: 1200px;
  background-repeat-x: no-repeat;
  background-position: center; }
  body.cookies {
    background-color: white; }

p {
  color: white;
  line-height: 150%; }
  p a:link, p a:active, p a:visited {
    color: #00ffff;
    text-decoration: none; }
  p a:hover {
    color: #00ffff;
    text-decoration: underline; }
  p.block {
    width: 80%;
    max-width: 300px;
    display: inline-block; }
  p.align-centered {
    text-align: center; }
  p.align-left {
    text-align: left; }

.hidden {
  display: none; }

div.container {
  width: 100%;
  max-width: 60em;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  padding-left: 1em;
  padding-right: 1em;
  box-sizing: border-box; }

.center {
  margin-left: auto;
  margin-right: auto; }

div.clear {
  clear: both; }

.fontello {
  font-family: 'fontello'; }

div.hero {
  background-image: url("../img/heroShotGradient_topGradient.jpg");
  background-position: top center;
  background-size: 120%;
  margin-top: 40px;
  background-repeat: no-repeat;
  width: 100%;
  height: 200%;
  position: absolute;
  top: 0px;
  z-index: -100; }
  @media screen and (max-width: 787px) {
    div.hero {
      background-size: 150%; } }
  @media screen and (max-width: 481px) {
    div.hero {
      background-size: 180%; } }
  @media screen and (max-width: 401px) {
    div.hero {
      background-size: 180%; } }
  @media screen and (max-width: 321px) {
    div.hero {
      background-size: 210%; } }

div.heroOverlay {
  background-color: rgba(40, 18, 51, 0);
  background-image: -webkit-linear-gradient(top, rgba(40, 18, 51, 0) 0%, #281233 100%);
  background-image: linear-gradient(to bottom,rgba(40, 18, 51, 0) 0%, #281233 100%);
  width: 100%;
  height: 200px;
  position: absolute;
  top: 0em;
  margin-top: 46%;
  z-index: -10; }
  @media screen and (max-width: 1800px) {
    div.heroOverlay {
      margin-top: 44%; } }
  @media screen and (max-width: 1530px) {
    div.heroOverlay {
      margin-top: 41%; } }
  @media screen and (max-width: 787px) {
    div.heroOverlay {
      margin-top: 64%; } }
  @media screen and (max-width: 481px) {
    div.heroOverlay {
      margin-top: 80%; } }
  @media screen and (max-width: 401px) {
    div.heroOverlay {
      margin-top: 58%; } }
  @media screen and (max-width: 321px) {
    div.heroOverlay {
      margin-top: 77%; } }

div.fromTop {
  margin-top: 40%; }
  @media screen and (max-width: 787px) {
    div.fromTop {
      margin-top: 57%; } }
  @media screen and (max-width: 481px) {
    div.fromTop {
      margin-top: 72%; } }
  @media screen and (max-width: 401px) {
    div.fromTop {
      margin-top: 75%; } }
  @media screen and (max-width: 321px) {
    div.fromTop {
      margin-top: 100%; } }

#topLogo {
  position: absolute;
  top: 2.5em;
  left: 50%;
  margin-left: -11%;
  width: 24%; }
  @media screen and (max-width: 787px) {
    #topLogo {
      margin-left: -15%;
      width: 36%; } }
  @media screen and (max-width: 401px) {
    #topLogo {
      margin-left: -18%;
      width: 40%; } }
  @media screen and (max-width: 321px) {
    #topLogo {
      margin-left: -22%;
      width: 50%; } }

@media screen and (max-width: 481px) {
  #newsletter {
    font-size: 12px; } }
@media screen and (max-width: 321px) {
  #newsletter {
    font-size: 10px; } }

input {
  background-color: transparent;
  border: none;
  width: 22em;
  background-repeat: no-repeat;
  text-align: center;
  font-size: 1em;
  font-weight: 400;
  box-sizing: border-box; }

input[type='email'] {
  background-image: url("../img/outlineBox.svg");
  color: #00ffff;
  padding: 0.5em 3em 0.5em 3em; }

input[type='submit'] {
  padding: 0.5em 3em 0.5em 3em;
  background-image: url("../img/filledBox.svg");
  color: #281233;
  font-family: 'Rambla', sans-serif;
  margin-top: 0.5em;
  cursor: pointer; }
  input[type='submit']:hover {
    background-image: url("../img/filledBoxHighlight.svg");
    color: #281233; }

#headline {
    font-size: 12px;
    height: 70px;    }
@media screen and (max-width: 1600px) {
    #headline {
    font-size: 12px;
    height: 60px;} }
@media screen and (max-width: 787px) {
  #headline {
    font-size: 12px;
    height: 55px;} }
@media screen and (max-width: 481px) {
  #headline {
    font-size: 10px;
    height: 45px;} }
@media screen and (max-width: 401px) {
  #headline {
    font-size: 8px; 
    height: 35px;
    } }
@media screen and (max-width: 321px) {
  #headline {
    font-size: 7px;
    height: 30px;} }

div.filledBox {
  background-image: url("../img/filledBox.svg");
  background-position: top center;
  background-size: 86%;
  background-repeat: no-repeat;
  text-align: center;
  font-size: 1.5em;
  font-weight: 400;
  width: 25em;
  box-sizing: border-box;
  display: block;
  margin: auto;
  padding-top: 0.6em;
  padding-bottom: 0.5em; }

.clipTriangle {
  clip-path: polygon(6em 0%, 0% 6em, 0 100%, 100% 100%, 100% 0%); }
  @media screen and (max-width: 787px) {
    .clipTriangle {
      clip-path: polygon(5em 0%, 0% 5em, 0 100%, 100% 100%, 100% 0%); } }
  @media screen and (max-width: 481px) {
    .clipTriangle {
      clip-path: polygon(4em 0%, 0% 4em, 0 100%, 100% 100%, 100% 0%); } }
  @media screen and (max-width: 401px) {
    .clipTriangle {
      clip-path: polygon(3em 0%, 0% 3em, 0 100%, 100% 100%, 100% 0%); } }
  @media screen and (max-width: 321px) {
    .clipTriangle {
      clip-path: polygon(2em 0%, 0% 2em, 0 100%, 100% 100%, 100% 0%); } }

img.platform {
  width: 40em;
  display: inline-block;
  margin: 1em;
  margin-top: 2.5em; }
  @media screen and (max-width: 1600px) {
  img.platform {
    width: 32em; } }
  @media screen and (max-width: 787px) {
  img.platform {
    width: 30em; } }
    @media screen and (max-width: 481px) {
      img.platform {
        width: 25em; } }
    @media screen and (max-width: 401px) {
      img.platform {
        width: 22em; } }
    @media screen and (max-width: 321px) {
      img.platform {
        width: 20em; } }

hr {
  height: 12em;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 2.5em;
  border: none;
  column-span: all; }
  @media screen and (max-width: 787px) {
    hr {
      background-size: 2em; } }
  @media screen and (max-width: 481px) {
    hr {
      background-size: 1.9em;
      height: 10em; } }
  @media screen and (max-width: 401px) {
    hr {
      background-size: 1.8 0.5em;
      height: 9em; } }
  @media screen and (max-width: 321px) {
    hr {
      background-size: 1.5em;
      height: 8em; } }
  hr.dot {
    background-image: url("../img/dot.svg"); }
  hr.dot2 {
    background-image: url("../img/dot2.svg"); }
  hr.dot3 {
    background-image: url("../img/dot3.svg"); }
  hr.ships {
    background-image: url("../img/ships.svg"); }
  hr.vspacer {
    height: 2.5em;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 2.5em;
    border: none;
    column-span: all; }
    @media screen and (max-width: 787px) {
      hr.vspacer {
        background-size: 2em; } }
    @media screen and (max-width: 481px) {
      hr.vspacer {
        background-size: 1.9em;
        height: 2em; } }
    @media screen and (max-width: 401px) {
      hr.vspacer {
        background-size: 1.8 0.5em;
        height: 1.25em; } }
    @media screen and (max-width: 321px) {
      hr.vspacer {
        background-size: 1.5em;
        height: 1em; } }

#info {
  max-width: 30em;
  column-count: 2;
  column-gap: 2em; }
  #info p.columnBreak {
    font-size: 0px;
    margin: 0px;
    padding: 0px; }
  @media screen and (max-width: 481px) {
    #info {
      column-count: 1; }
      #info p.columnBreak {
        display: none; } }
  #info h2, #info h3 {
    color: #00ffff;
    font-size: 2em;
    line-height: 150%;
    display: block;
    text-align: left;
    margin-bottom: 0.5em;
    column-span: all;
    text-transform: uppercase;
    text-indent: 0.7em; }
  #info h3 {
    font-size: 1.5em;
    margin-top: 1em; }
  #info p {
    display: inline-block;
    vertical-align: text-top;
    text-align: left;
    box-sizing: border-box;
    margin-bottom: 1em; }
  #info ul {
    column-span: all;
    color: white;
    text-align: left; }
    #info ul li {
      display: block;
      width: 100%;
      text-align: center;
      
      padding-top: 1.4em;
      margin-bottom: 0.9em;
      line-height: 150%;
      background-image: url("../img/bullet.svg");
      background-position: top center;
      background-size: 1em;
      background-repeat: no-repeat; }
      #info ul li:first-of-type {
        background-image: none; }
      #info ul li a:link, #info ul li a:active, #info ul li a:visited {
        color: #00ffff;
        text-decoration: none; }
      #info ul li a:hover {
        color: #00ffff;
        text-decoration: underline; }

.upperCase {
    text-transform: uppercase;
}
div.social {
  margin-top: 5em;
  margin-bottom: 5em; }
  div.social ul li {
    margin-bottom: 1.5em;
    margin: auto;
    margin-top: 2em;
    width: 2.5em; }

#music img {
  width: 100%;
  max-width: 650px;
  margin-top: 3em; }

.bandcamp {
  width: 100%;
  max-width: 650px;
  height: 400px;
  border: 0;
  margin-top: -3px; }

#cookieMonster {
  width: 100%;
  position: fixed;
  bottom: 0px;
  z-index: 1000;
  background-color: white;
  color: black;
  font-family: 'bitter';
  font-weight: 400;
  padding: 1em;
  box-sizing: border-box;
  text-align: center;
  border-top: 1px solid #ccc; }
  #cookieMonster p {
    color: black;
    text-align: left;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto; }
  #cookieMonster p.right {
    text-align: right; }
  #cookieMonster button ~ button {
    margin-left: 3px; }

#tinyCookieMonster {
  width: 100%;
  position: fixed;
  bottom: 0px;
  z-index: 1000;
  background-color: white;
  color: black;
  font-weight: 400;
  padding-top: 0.3em;
  padding-bottom: 0.2em;
  padding-left: 1em;
  padding-right: 1em;
  box-sizing: border-box;
  text-align: center;
  border-top: 1px solid #ccc; }
  #tinyCookieMonster p {
    color: black;
    text-align: left;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto; }
  #tinyCookieMonster .dismiss {
    display: inline-block;
    cursor: pointer; }

.cookieClickThrough {
  position: relative; }
  .cookieClickThrough img {
    width: 100%; }

.cookieShield {
  background-color: rgba(255, 255, 255, 0.6);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 100;
  text-align: center; }
  .cookieShield div {
    position: relative;
    top: 50%;
    transform: translateY(-50%); }
  .cookieShield p {
    font-family: 'Bitter';
    color: black;
    max-width: 400px;
    display: inline-block; }

button.cookie {
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  border: 1px solid black;
  display: inline-block;
  cursor: pointer;
  color: black;
  background-color: white;
  font-family: 'bitter';
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  text-decoration: none;
  font-size: 16px;
  margin-bottom: 3px;
  width: 10em; }
  button.cookie:hover {
    background-color: #cccccc; }

button.cookieAccept {
  background-color: #2DFFAD; }
  button.cookieAccept:hover {
    background-color: #00c679; }

#menu {
  position: fixed;
  top: 0px;
  z-index: 1000;
  padding-top: 0.2em;
  height: 2.5em;
  width: 100%;
  background-color: white;
  color: #8204C3; }
  #menu h1 {
    display: inline;
    margin-right: 1em;
    font-weight: 700; }
  #menu ul {
    display: inline; }
    #menu ul li {
      display: inline; }
      #menu ul li + li {
        margin-left: 1em; }
        @media screen and (max-width: 430px) {
          #menu ul li + li {
            margin-left: 0.2em; } }
      #menu ul li.active {
        border-bottom: 2px solid #8204C3; }
  #menu a:link, #menu a:active, #menu a:visited, #menu a:hover {
    color: inherit;
    text-decoration: inherit; }

#pullTab {
  display: none;
  margin-right: 1em;
  cursor: pointer; }
  #pullTab:before {
    font-size: 1.25em;
    position: relative;
    left: -0.35em; }

#left-menu, #right-menu {
  padding-top: 0.7em;
  padding-bottom: 0.7em; }

#left-menu {
  float: left; }
  @media screen and (max-width: 650px) {
    #left-menu #pullTab {
      display: inline;
      margin-left: 0; }
    #left-menu h1 {
      display: none; }
    #left-menu ul li {
      display: none; }
    #left-menu.expanded #pullTab {
      display: inline;
      margin-left: 0; }
    #left-menu.expanded ul {
      background-color: white;
      position: fixed;
      top: 2.3em;
      left: 0;
      width: 100%; }
      #left-menu.expanded ul li {
        display: table;
        margin-left: 2em;
        margin-right: 2em;
        margin-top: 0.5em;
        margin-bottom: 1em;
        text-align: left; } }

#right-menu {
  float: right; }

#top-green {
  background-color: #2DFFAD; }

#cover-text {
  margin-top: -42%;
  padding-bottom: 10%; }
  @media screen and (max-width: 830px) {
    #cover-text {
      margin-top: -45%; } }
  @media screen and (max-width: 630px) {
    #cover-text {
      margin-top: -58%; } }
  @media screen and (max-width: 430px) {
    #cover-text {
      margin-top: -66%; } }
  @media screen and (max-width: 320px) {
    #cover-text {
      margin-top: -87%; } }

#mid-violet {
  background-color: #281233; }

#logo-white {
  margin-top: 20%;
  width: 20%;
  margin-bottom: 10%; }
  @media screen and (max-width: 630px) {
    #logo-white {
      width: 26%; } }
  @media screen and (max-width: 430px) {
    #logo-white {
      width: 35%;
      margin-top: 30%; } }

#grassball {
  width: 70%;
  margin-top: 0%; }
  @media screen and (max-width: 630px) {
    #grassball {
      width: 90%; } }
  @media screen and (max-width: 430px) {
    #grassball {
      width: 95%; } }
  @media screen and (max-width: 320px) {
    #grassball {
      width: 100%; } }

#mid-violet {
  padding-top: 200px; }

#lightfield {
  margin-top: 10%;
  margin-bottom: 50px; }
  @media screen and (max-width: 500px) {
    #lightfield {
      width: 80%; } }

#screenshots img, #screenshots-nav img {
  width: 100%; }

#screenshots img {
  clip-path: polygon(6em 0%, 0% 6em, 0 100%, 100% 100%, 100% 0%); }
  @media screen and (max-width: 787px) {
    #screenshots img {
      clip-path: polygon(5em 0%, 0% 5em, 0 100%, 100% 100%, 100% 0%); } }
  @media screen and (max-width: 481px) {
    #screenshots img {
      clip-path: polygon(4em 0%, 0% 4em, 0 100%, 100% 100%, 100% 0%); } }
  @media screen and (max-width: 401px) {
    #screenshots img {
      clip-path: polygon(3em 0%, 0% 3em, 0 100%, 100% 100%, 100% 0%); } }
  @media screen and (max-width: 321px) {
    #screenshots img {
      clip-path: polygon(2em 0%, 0% 2em, 0 100%, 100% 100%, 100% 0%); } }

#screenshots-nav .screenshot {
  margin: 5px;
  margin-top: 10px; }

#zanshin-embed {
  border: solid white 15px;
  display: inline-block;
  background-color: white;
  margin-top: 50px;
  margin-bottom: 50px; }

#business-agency {
  width: 80px;
  margin-top: 30px;
  margin-bottom: 50px; }

#cookiePolicy {
  text-align: left;
  padding: 1em;
  font-family: 'Bitter'; }
  #cookiePolicy h1 {
    font-size: 2em;
    margin-top: 1em;
    margin-bottom: 1em; }
  #cookiePolicy h2 {
    font-size: 1.5em;
    margin-top: 1em;
    margin-bottom: 1em; }
  #cookiePolicy p {
    text-align: left;
    color: black;
    max-width: 600px;
    line-height: 120%; }
  #cookiePolicy b {
    font-weight: 700; }
  #cookiePolicy ul {
    margin-top: 0.5em;
    margin-bottom: 0.5em; }
    #cookiePolicy ul li {
      list-style: circle;
      margin-left: 1em;
      line-height: 120%; }
  #cookiePolicy div.cookieStatus {
    border: 1px dashed #ccc;
    border-radius: 0.5em;
    padding: 0.5em;
    box-sizing: content-box;
    max-width: 600px; }
  #cookiePolicy .return {
    margin-top: 2em;
    margin-bottom: 2em; }

.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%; }

.embed-container iframe, .embed-container object, .embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

.slick-prev, .slick-next {
  position: absolute;
  top: 45%;
  z-index: 100;
  height: 60px;
  cursor: pointer;
  color: transparent;
  border: none;
  outline: none;
  background: transparent;
  font-family: 'fontello';
  font-size: 0px;
  line-height: 0px; }

.slick-prev {
  left: 5px; }
  .slick-prev:after {
    content: "<";
    font-size: 40px;
    color: white; }

.slick-next {
  right: 5px; }
  .slick-next:before {
    content: ">";
    font-size: 40px;
    color: white; }

#screenshots-nav .slick-current {
  box-sizing: border-box;
  background-color: #00ffff; }
  #screenshots-nav .slick-current img {
    clip-path: polygon(4px calc(100% - 4px), 40% calc(100% - 4px), 50% 80%, 60% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 4px, 4px 4px); }

#footer {
  position: relative;
  margin-bottom: -10px; }

#footerOverlay, #footerLogo {
  width: 100%; }

#footerLogo, #footerShip {
  position: absolute;
  bottom: 0px;
  left: 0px; }

#footerShip {
  width: 100%;
  transform: rotate(-45deg);
  bottom: 30%;
  left: -20%; }

#textFooter {
  position: relative;
  bottom: 0px;
  background-color: #000;
  text-align: center;
  padding: 0.5em; }
  #textFooter p {
    display: block;
    width: 100%;
    font-size: 0.7em;
    line-height: 150%; }

/*# sourceMappingURL=style.css.map */