body{
  background: #000;
  margin: 0;
}
#container{
  background: #D8D8D8;
}
#container,
#container::before {
  width: 100%;
  height: 100%;
  /*border-top: 30px solid #000;*/
  position: absolute;;
  box-shadow: inset 0 0 500px 50px #000000;
}
#container::before{
  content: "";
  border: 0;
}
/*#container::before,*/
#bg {
  content:"";
  background: #F6D925 url(img/back.svg) center center;
  /*background: url(img/ref.png) center center;*/
  background-color: #cab63e;
  height: 700px;
  width: 500px;
  top: 50%;
  margin-top:-350px;
  left: 50%;
  margin-left: -250px;
  position: absolute;
  display: block;
}
#container::after{
  content:"";
  background: url(img/front.svg) center center;
  height: 700px;
  width: 500px;
  top: 50%;
  margin-top:-350px;
  left: 50%;
  margin-left: -250px;
  position: absolute;
  display: block;
}
h1 {
  font-family: "futura_ltcondensedextrabold", sans;
  font-size: 251px;
  position: absolute;
  text-align: center;
  width: 100%;
  top: 50%;
  margin-top:-203px;
}
h2 {
  font-family: "futura_ltcondensedlight", sans;
  font-size: 20px;
  text-align: left;
  width: 500px;
  top: 50%;
  margin-top: 318px;
  left: 50%;
  margin-left: -239px;
  position: absolute;
}
@media only screen and (max-width: 1900px) {
  h1 {
      font-size: 14vw;
      margin-top: -12vw;
  }
  #bg:after {
    content: "*optimized for 1920x1080 display";
    font-family: "futura_ltcondensedlight", sans;
    font-size: 16px;
    position: fixed;
    left: 10px;
    bottom: 10px;
    color: #333;
  }
}

@media only screen and (min-height: 900px) {
  #container,
  #container::before {
    height: 900px;
    margin-top: -450px;
    top: 50%;
    position: absolute;
  }
}