.art-info{
  margin-top:2rem;
}

h2.art-title{
  margin-top:0rem;
  margin-bottom:0;
}

.art-info a{
  text-decoration:underline;
}

.art-info p:first-child{
  margin-bottom:1rem;
}
.art-info p:last-child{
  margin-bottom:0;
}

.model-viewer--wrapper{
  position:relative;
  width:100%;
  padding-top:140%;
  border: 1px solid var(--model-viewer-border);
  box-sizing:border-box;
}

model-viewer {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  width: 100%;
  height: 100%;
  background-color: var(--color-background);
}

.progress-bar {
  display: block;
  width: 100%;
  height: 2px;
  position: absolute;
  left: 0;
  top: 0;
  right:0;
  background-color: transparent;
}

.progress-bar.hide{
  visibility: visible;
  opacity:0;
  transition: opacity .5s;
  transition-delay: .3s;
}

.update-bar {
  background-color: var(--color-text);
  width: 0%;
  height: 100%;
  border-radius: 0;
  float: left;
  transition: width .5s;
}

#ar-button{
  display:none;
}

.ar-view-wrapper{
  position:absolute;
  display:block;
  bottom:1.5rem;
  width:100%;
  text-align:center;
}

#ar-view{
  /* position:absolute; */
  display:inline-block;
  /* bottom: 2rem; */
  /* left: 50%; */
	/* transform: translateX(-50%); */
  background-image: url(/images/model-viewer/ar_icon.png);
  background-repeat: no-repeat;
  background-size: 1.25rem 1.25rem;
  background-position: 1.25rem 50%;
  background-color: var(--button-color-background);
  white-space: nowrap;
  padding: .75rem 1.25rem .75rem 3rem;
  text-align:center;
  color: var(--button-color-text);
  border-radius: 10rem;
  border:1px solid var(--button-color-border);
  cursor:pointer;
  transition:all .25s ease-in-out;
}

#ar-view:hover{
  scale:.95;
}

@media (hover: none) and (pointer: coarse) {
  #ar-view:hover{
    scale:1;
  }
}

#ar-view:focus {
  outline: none;
}

#ar-message{
  background:var(--ar-message-color-background);
  color: var(--ar-message-color-text);
  font-size: var(--font-size-small);
  line-height: 1.5em;
  display:block;
  padding:0;
  max-height:0px;
  transition: max-height .5s, padding-top .5s, padding-bottom .5s;
  text-align:center;
}

#ar-message.visible{
  padding:1rem;
  max-height:100px;
}

#ar-qr{
  display:flex;
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:var(--ar-qr-color-background);
  box-sizing:border-box;
  padding:2rem;
  color:var(--ar-qr-color-text);
  align-content:center;
  flex-wrap:wrap;
  opacity: 0;
  transition:opacity .5s ease-in-out;
  pointer-events: none;
}

#ar-qr.visible{
  opacity:1;
  pointer-events: auto;
}

#ar-qr svg{
  width:100%;
  height:auto;
  padding:1rem;
  box-sizing:border-box;
  background:white;
}

#ar-qr-close{
  width:2rem;
  height:2rem;
  position: absolute;
	right: 1rem;
	top: 1rem;
  cursor:pointer;
}
#ar-qr-close::before,
#ar-qr-close::after{
  content:'';
  width:100%;
  height:1px;
  background:var(--ar-qr-color-text);
  display:block;
  position:absolute;
  top:50%;
  left:0;
}
#ar-qr-close::before{
  transform: rotate(45deg);
}
#ar-qr-close::after{
  transform: rotate(-45deg);
}