/* <model-viewer> CSS------------------------------ */
/* 3D model plugin from https://modelviewer.dev  */
/* ------------------------------------------------- */

model-viewer {
	width: 100%;
	height: 100%;
}


.intro-model {
	position: relative;
	height: 80vh;
	width: 90vw;
    /* padding: 0 5vw; */
    background-color: hsla(210, 8%, 64%, 1.0);
}

.model-grey {
	background-color: #e9e9e9;
}

.poster-text {
	/* display: flex;
	align-items: center;
	justify-content: center; */
	font-size: 1.5em;
	font-family: source-code-pro;
	/* padding-top: 0.75em; */
	background-color: #000;
	color: #fff;
	border-radius: 3px;
	padding: 12px 18px 12px 18px;
	box-shadow: 0 0 8px rgba(0,0,0,.2), 0 0 4px rgba(0,0,0,.25);
	height: auto;
	position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
    z-index: 100;

}

/* 
:not(:defined) > * {
    display: none;
  } */


/* model specific background ------------------------------ */
/* ------------------------------------------------- */

model-viewer#rack {
	background-color: hsla(210, 8%, 64%, 1.0);
}

model-viewer#wera {
	background-color: #A5B0AC;
}

model-viewer#rtmr {
	background-color: #6666661;
}

model-viewer#halt {
	background-color: #9CA3AB;
}


/* model header ------------------------------ */
/* ------------------------------------------------- */

.model-head {
	font-family: var(--body-fam);
	font-weight: 300;
	margin: 1em 0;
}

.model-head h3 {
	color: var(--intro-bg);
	letter-spacing: 2px;
}

.model-head h5 {
	color: #fff;
	opacity: 0.8;
	font-style: italic;
	font-size: 1em;
}

/* ar-button ------------------------------ */
/* ------------------------------------------------- */

#ar-button {
    background-image: url(/images/general/ar-sprite-181818-48dp.png);
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: 12px 50%;
    background-color: #fff;
    position: absolute;
	transform: translateX(-50%);
	left: 50%;
	right: 5vw;
	bottom: 5vw;
	/* bottom: 132px; */
    white-space: nowrap;
    padding: 0px 16px 0px 40px;
    /* font-family: var(--body-fam); */
	font-family: source-code-pro;
    font-size: 14px;
    color:#181818;
    height: 36px;
    line-height: 36px;
    border-radius: 18px;
    border: 1px solid #DADCE0;
  }

  #ar-button:active {
    background-color: #E8EAED;
  }

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

  #ar-button:focus-visible {
    outline: 1px solid #4285f4;
  }



/* media query ------------------------------ */
/* ------------------------------------------------- */

@media only screen 
	and (max-width: 768px)
	 {

	.intro-model {
		width: 100vw;
		height: 60vh;
	}

	model-viewer {
		width: 100%;
	}

	.poster-text {
		width: 75%;
		text-align: center;
	}

	.model-head {
		display: none;
	}

	#ar-button {
		/* padding: 0px 20vw 0px 20vw;
		border-width: 2px; */
		width: 40vw;
	}


}