*,
::after,
::before {
  box-sizing: inherit
}

body {
  background: #000;
  font-family: "IBM Plex Mono", monospace;
  font-size: 1rem;
  font-style: normal;
  font-weight: 300;
  line-height: 1.3;
  color: #fff;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative
}

.landing {
  width: 100%;
  height: 100%;
  min-height: 100%;
  background-color: #000;
  overflow: hidden;
  position: relative
}

.landing-background {
  background-image: url(/landing-background.jpg);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  display: block;
  opacity: 0;
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  animation-name: slideshow;
  animation-duration: 40s;
  animation-timing-function: linear;
  animation-fill-mode: forwards
}

@keyframes slideshow {
  0% {
    opacity: 0
  }

  10% {
    opacity: 1
  }

  100% {
    opacity: 1;
    transform: scale(1.5)
  }
}

.landing-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: .5;
  background: -moz-linear-gradient(left, #000 0, #000 5%, transparent 100%);
  background: -webkit-linear-gradient(left, #000 0, #000 5%, transparent 100%);
  background: linear-gradient(to right, #000 0, #000 5%, transparent 100%)
}

/* for placing at center
      .landing-content {
      z-index: 2;
      height: 100%;
      width: 80vw;
      max-width:800px;
      margin: 0 auto;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-flex-flow: row wrap;
      -ms-flex-flow: row wrap;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      position: relative;
      text-shadow: 0 2px 10px rgba(33, 33, 33, .3)
      }
      */
.landing-content {
  z-index: 2;
  height: 100%;
  width: 80vw;
  max-width: 800px;
  margin: 20vh auto;
  position: relative;
  text-shadow: 0 2px 10px rgba(33, 33, 33, .3)
}

.landing-content-title h1 {
  font-weight: 500;
  font-size: 4.5rem;
  line-height: 0.8;
  letter-spacing: normal;
  margin: 0;
}

.landing-content-text {
  padding-top: 2rem;
  padding-left: 0.2rem;
}

.landing-content-text,
.landing-content-title {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-timing-function: cubic-bezier(.23, 1, .32, 1);
  animation-timing-function: cubic-bezier(.23, 1, .32, 1);
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both
}

@keyframes fadeIn {
  from {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0)
  }

  to {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
  }
}