html, body, #main {
  background: #1e1231;
  color: #fff;
}

#header .nav {
  -webkit-filter: drop-shadow(0 0.05em 0.05em rgba(32, 0, 0, 0.5)) drop-shadow(0 0 0.05em rgba(32, 0, 0, 0.5));
          filter: drop-shadow(0 0.05em 0.05em rgba(32, 0, 0, 0.5)) drop-shadow(0 0 0.05em rgba(32, 0, 0, 0.5));
}

.nav-logo {
  content: url(/img/xinstar-logo2.png);
}

.bg-area {
  background: #1e1231;
}

@media (max-width: 1200px) {
  #socials {
    left: 0;
  }
}
/*==============*/
/* PAGE CONTENT */
.border {
  position: relative;
  display: table;
  z-index: 0;
  font-weight: 700;
  max-width: 90%;
  margin: 0.5em auto 0.5em;
  color: #192873;
  background: #000;
}
.border::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  -webkit-box-shadow: inset 0 0 0.5em #000, inset 0 0 0.25em #000;
          box-shadow: inset 0 0 0.5em #000, inset 0 0 0.25em #000;
  -o-border-image: url(/img/Edm/Game_Megashark4/border.png) 60 fill/1em/0.8em 0.8em 0.4em;
     border-image: url(/img/Edm/Game_Megashark4/border.png) 60 fill/1em/0.8em 0.8em 0.4em;
}

.head-title {
  padding: 2em 0 19em;
}

.title-01.fade-up {
  width: 13.5em;
  -webkit-transform: translate(0, -1em);
          transform: translate(0, -1em);
}

#content-area {
  position: relative;
  left: 50%;
  -webkit-transform: translate(-50%);
          transform: translate(-50%);
  width: 100vw;
  max-width: 1000px;
}

.btn-play {
  font-size: inherit;
  position: absolute;
  top: -17em;
  left: -0.5em;
  z-index: 1;
  width: 9em;
  height: 9em;
  border-radius: 100%;
  border: none;
  cursor: pointer;
  background: url(/img/Edm/Game_Megashark4/btn-play.png) 0 0/auto 100%;
  -webkit-animation: btnPlay5 0.5s infinite step-end;
          animation: btnPlay5 0.5s infinite step-end;
  -webkit-transition: opacity 1s 0.2s, -webkit-filter 0.2s, -webkit-transform 1s 0.2s;
  transition: opacity 1s 0.2s, -webkit-filter 0.2s, -webkit-transform 1s 0.2s;
  transition: filter 0.2s, transform 1s 0.2s, opacity 1s 0.2s;
  transition: filter 0.2s, transform 1s 0.2s, opacity 1s 0.2s, -webkit-filter 0.2s, -webkit-transform 1s 0.2s;
  -webkit-transform: translate(0, 1em);
          transform: translate(0, 1em);
}
.btn-play.faded {
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}
.btn-play:hover {
  -webkit-filter: brightness(1.2) drop-shadow(0 0 0.5em #fc4);
          filter: brightness(1.2) drop-shadow(0 0 0.5em #fc4);
}

@-webkit-keyframes btnPlay5 {
  0% {
    background-position: 0 0;
  }
  25% {
    background-position: 33.333% 0;
  }
  50% {
    background-position: 66.667% 0;
  }
  75% {
    background-position: 100% 0%;
  }
}

@keyframes btnPlay5 {
  0% {
    background-position: 0 0;
  }
  25% {
    background-position: 33.333% 0;
  }
  50% {
    background-position: 66.667% 0;
  }
  75% {
    background-position: 100% 0%;
  }
}
video {
  width: 100%;
  height: 100%;
}

#event1 {
  -webkit-transition: opacity 2s 0.5s, -webkit-transform 2s 0.5s;
  transition: opacity 2s 0.5s, -webkit-transform 2s 0.5s;
  transition: transform 2s 0.5s, opacity 2s 0.5s;
  transition: transform 2s 0.5s, opacity 2s 0.5s, -webkit-transform 2s 0.5s;
  -webkit-transform: translate(0, 1em);
          transform: translate(0, 1em);
}
#event1.faded {
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}

/* ==================== */
/* JS ANIMATION CLASSES */
.fade-up {
  -webkit-transform: scale(0.5);
          transform: scale(0.5);
  opacity: 0;
  -webkit-transition: opacity 1.6s, -webkit-transform 1s;
  transition: opacity 1.6s, -webkit-transform 1s;
  transition: opacity 1.6s, transform 1s;
  transition: opacity 1.6s, transform 1s, -webkit-transform 1s;
}
.fade-up.faded {
  -webkit-transform: none;
          transform: none;
  opacity: 1;
}

.bg-area .fade-up {
  -webkit-transform: none;
          transform: none;
}

/*=====================*/
/* KEYFRAMES AND MEDIA *//*# sourceMappingURL=main.css.map */