/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
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; }

/* HTML5 display-role reset for older browsers */
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; }

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background-color: #000000;
  width: 100%;
  height: 100%; }

.background {
  overflow-x: hidden;
  width: 100%;
  position: absolute; }
  @media screen and (max-width: 1599px) {
    .background {
      width: 130%;
      margin-left: -15%; } }
  @media screen and (max-width: 1365px) {
    .background {
      width: 160%;
      margin-left: -30%; } }
  @media screen and (max-width: 959px) {
    .background {
      width: 100%;
      margin-left: 0; } }
  .background > img:nth-child(1) {
    width: 100%;
    display: block; }
    @media screen and (max-width: 959px) {
      .background > img:nth-child(1) {
        width: 100vw;
        min-height: 1080px;
        object-fit: cover; } }

.light {
  display: block;
  position: absolute;
  top: 10.09259%;
  left: 33.69792%;
  width: 30.57292%;
  height: 30.64815%;
  opacity: 0;
  animation: light 3s infinite; }
  @media screen and (max-width: 959px) {
    .light {
      display: none; } }

@keyframes light {
  0% {
    opacity: 0; }
  2% {
    opacity: 1; }
  4% {
    opacity: 1; }
  8% {
    opacity: 0; }
  10% {
    opacity: 1; }
  12% {
    opacity: 1; }
  16% {
    opacity: 0; } }

.wrap {
  position: absolute;
  top: 0;
  width: 48.95833%;
  left: 25.52083%;
  height: 100%; }
  @media screen and (max-width: 959px) {
    .wrap {
      width: 100%;
      left: 0; } }
  .wrap img {
    position: absolute;
    width: 100%; }
    @media screen and (max-width: 959px) {
      .wrap img {
        position: relative; } }
  .wrap a {
    position: absolute; }
    @media screen and (max-width: 959px) {
      .wrap a {
        position: static; } }
  .wrap > .img1 {
    width: 30.25%;
    left: 2%;
    top: 16%; }
    @media screen and (max-width: 959px) {
      .wrap > .img1 {
        display: block;
        position: static;
        width: 242px;
        padding-left: 52px;
        margin: 283px auto 0 auto; } }
  .wrap > .img2 {
    width: 31.25%;
    right: 2%;
    top: 2%; }
    @media screen and (max-width: 959px) {
      .wrap > .img2 {
        display: block;
        position: static;
        padding-left: 52px;
        width: 250px;
        margin: 15px auto; } }

.logo {
  width: 19.25%; }
  @media screen and (max-width: 959px) {
    .logo {
      width: 100%; } }
  @media screen and (max-width: 959px) {
    .logo img {
      width: 184px;
      display: block;
      padding-left: 40px;
      position: static;
      margin: 0 auto; } }

.button {
  width: 22.625%;
  top: 43.98148%;
  left: 38%; }
  @media screen and (max-width: 959px) {
    .button {
      width: 100%; } }
  @media screen and (max-width: 959px) {
    .button img {
      width: 181px;
      display: block;
      position: static;
      margin: 0 auto; } }

.button:hover {
  filter: brightness(120%); }

.fire {
  width: 23%;
  height: 30%;
  display: block;
  position: absolute;
  right: 10%;
  top: -3%; }
  @media screen and (max-width: 959px) {
    .fire {
      width: 280px;
      height: 160px;
      top: 5px;
      right: 0; } }

.fire2 {
  width: 30%;
  height: 30%;
  display: block;
  position: absolute;
  left: 10%;
  top: -3%; }
  @media screen and (max-width: 959px) {
    .fire2 {
      display: none; } }

#scene {
  top: 0;
  width: 95%;
  height: 95%;
  position: absolute; }
  @media screen and (max-width: 959px) {
    #scene {
      width: 140%;
      height: 100%;
      left: -20%;
      top: 110px; } }
  #scene img {
    width: 100%; }