#main {
  position: relative;
  width: 100vw;
  height: 100vh; }
  #main .main-content {
    position: absolute;
    width: 60vw;
    max-width: 786px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }
    @media (min-width: 769px) {
      #main .main-content {
        width: 30vw; } }

#wrapper {
  background-color: #000;
  background-image: url("../img/bg-top01.jpg");
  background-size: cover;
  background-attachment: fixed;
  background-position: center center;
  background-repeat: no-repeat;
  height: 100vh;
  /* animation: fade_in 10s ease-in; */ }

@keyframes fade_in {
  0% {
    background-color: #000; }
  100% {
    background-color: transparent; } }
#container, #luxbar {
  position: fixed;
  height: 100vh;
  animation: fade_out 7.5s ease-in; }

@keyframes fade_out {
  0% {
    background-color: #000; }
  70% {
    background-color: #000; }
  100% {
    background-color: transparent; } }
#luxbar {
  animation: fade_opacity 7.5s ease-in; }

@keyframes fade_opacity {
  0% {
    opacity: 0; }
  70% {
    opacity: 0; }
  100% {
    opacity: 1; } }
/* logo animation */
#svg-animation .cls-1 {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-miterlimit: 10;
  stroke-width: 19px;
  stroke-dasharray: 1500;
  stroke-dashoffset: 1500; }