body {
  margin: 0;
  padding: 0;
  font-family: 'Raleway', sans-serif;
  font-weight:800;
  color: #244376;
  background-color:dimgrey;
}

h1, h1 span {
  font-size: 7vh;
  line-height:0.85em;
  margin-bottom:2vh;
  margin-top:2vh;
  opacity:1;
}

p, span {
  font-size:16px;
  line-height:1em;
  color: #231f20;
}

p {
  opacity:0.9;
}

model-viewer {
  width: 100%;
  height: 100%;
  position: absolute;
  margin: 0;
  padding: 0;
}

#logo {
  position: absolute;
  top: 0;
  left: 5%;
  width: 400px;
  z-index: 1000;
  text-align:left;
}

#info {
  position: absolute;
  top: 5vh;
  left: 5vh;
  /*z-index: 1000;*/
  text-align:left;
  pointer-events: none;
}

#bottom-left-info {
  position: absolute;
  bottom: 5vh;
  left: 5vh;
  z-index: 1000;
  text-align:left;
  pointer-events: none;
}

#bottom-left-info .pointer {
  pointer-events:auto;
}

#bottom-left-info img {
  height:128px;
  margin-right:10px;
  opacity:0.9;
}

#bottom-left-info ul {
  margin:0;
  padding:0;
}

#bottom-left-info ul li {
  display:inline-block;
  margin-top:15px;
  margin-right:10px;
  font-size:0.8em;
  color:#000;
  opacity:0.9;
}

a {
    text-decoration: none;
    position: relative;
    color:#000;
}

a:after {
    content: '';

    width: 100%;
    position: absolute;
    left: 0;
    bottom: -4px;

    border-width: 0 0 1px;
    border-style: solid;
}

#bottom-left-info ul li a:hover {
  color: #f15a29;
  opacity:1;
}

a:visited {
  color: #000;
}

.uppercase {
  text-transform: uppercase;
}

.hide {
  display:none;
}

#background {
  position:fixed;
  left:0;
  bottom:0;
  opacity:0.1;
  background-image: url("https://cdn.glitch.com/fb681309-056e-4caa-98ea-6f087fe38f25%2Fkonstruktion-t-black.png?v=1585177101959");
  width:100%;
  height:100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 80% 30%;
  background-size:80%;
}

.ar-not-available .have-ar, .ar-available .no-ar {
  display:none;
}

#button-enter-ar {
  font-family: 'Raleway', sans-serif;
  font-weight:800;
  padding: 1px 6px 1px 6px;
  background-color: #f15a29;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15);
  border:0;
  padding:10px;
  position: absolute;
  bottom: 3vh;
  left: 3vh;
}

/* Add this to align vertically */
#button-enter-ar > img,
#button-enter-ar > span {
  vertical-align: middle;
  font-size:16px;
  line-height:1em;
  color: #231f20;
}

@media screen and (max-width: 604px) {
  h1, h1 span {
    /*font-size: 18vw;*/
  }
  #info {
    top:3vh;
    left:3vh;
  }
  #bottom-left-info {
    bottom:3vh;
    left:3vh;
  }
  #bottom-left-info ul .no-break {
    display:none;
  }
}

@media screen and (min-width: 605px) {
  #bottom-left-info ul .break {
    display:none;
  }
  #button-enter-ar {
    left:5vh;
  }
}

model-viewer {
  --poster-color: transparent;
}