html,body,#app {
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1,h2,h3 {
  font-weight: 300;
  font-family: 'Mayon Exquisite', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  margin: 20px 0;
}

h1 {
  font-size: 2em;
  margin: 0;
}

h2 {
  font-size: 2.8em;
}

h3 {
  font-size: 1.5em;
}

h4 {
  font-size: 1.25em;
}

h5 {
  font-size: 1em;
}

a,
a:visited {
  color: #fff;
}
a:active,
a:hover {
  /*color: -webkit-activelink;*/
  color: #fff;
}

p {
  margin: 20px 0;
}

.dg.a.main .close-button.close-bottom {
  width: 100% !important;
  height: 40px;
  line-height: 40px;
  position: relative;
  background: #151516;
}
.dg input[type="text"] {
  font-size: 14px;
}
.dg.a.main ul {
  height: auto !important;
}
.dg.a.main ul li.title {
  height: 40px;
  line-height: 40px;
  background-position: 6px 17px;
  border-color: #151516;
}

@media only screen and (min-width:667px) {
  .dg.a.main {
    position:absolute;
    top:0;
    right:0;
    width:33%!important
  }
}
@media only screen and (max-width:667px) {
  .dg {
    font: 14px 'Lucida Grande', sans-serif !important
  }
  .dg.a.main {
    /*position: absolute !important;*/
    width: 100% !important;
    top: 0;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
  }
}

#shader-preview > div {
  position: absolute;
}
canvas {
  height: auto !important;
  width: 100% !important;
}
.webvr-ui-title {
  white-space: nowrap;
}