body {
	margin:0;
	background-color: #aaaaaa;
}

a {
	color: black;
}

a:hover {
	color: black;
	text-decoration: none;
}

#info {
	padding: 2rem;
	pointer-events: none;
	background-color: rgba(255,255,255,0.5);
	padding-top: 11rem;
	width: 20%;
	height: 100vh;
	float: left;
	position: relative;
}

#logo {
	clear: both;
	position: absolute;
	top: 0;
	left: 0;
	padding: 2rem;
}

#dash {
	pointer-events: none;
	/* background-color: rgba(255,255,255,0.5); */
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	padding: 2rem;
	left: 80%;
}

#title-hud {
	pointer-events: none;
	/* background-color: rgba(255,255,255,0.5); */
	position: absolute;
	top: 0;
	padding: 2rem;
	left: 21%;
	font-size: 1.4rem;
	font-weight: bold;
	margin-bottom: .1rem;
}

#title-hud span {
	font-weight: normal;
}

/* 
#title-hud h1 {
	font-size: 1.4rem;
	font-weight: bold;
	margin-bottom: .1rem;
	}
 */

#title-hud h2 {
	font-size: 1.2rem;
	font-weight: normal;
	margin-bottom: .3rem;
}

#title-hud h3 {
	font-size: 1.0rem;
	font-weight: normal;
}

#monitor-holder {
	top: 280px;
	left: 240px;
	position: absolute;
	width: 50%;
}

#video-holder {
	top: 100px;
	left: 0;
	position: absolute;
	width: 100%;
}

#circle-holder {
	top: 380px;
	left: 940px;
	position: absolute;
}

#button-grid {
	float: left;
	width: 80%;
	height: 100vh;
	padding: 6rem 4rem;
}

#dash .inner {
	padding: 2rem;
	position: relative;
}

#readout h1 {
	font-size: 1.4rem;
	font-weight: bold;
	margin-bottom: 1rem;
}

#readout h2 {
	font-size: 1.1rem;
	font-weight: bold;
	letter-spacing: -1px;
}

#readout ul {
	padding-left: 30px;
}

#loading {
	width: 120px;
	height: 140px;
	background-color: transparent;
	position: absolute;
	top: 45%;
	left: calc(60% - 60px);
	text-align: center;
}
#threecontainer {
	clear: both;
	width: 80%;
	height: 100vh;
	-webkit-transition: height .5s ease;
	-moz-transition: height .5s ease;
	-ms-transition: height .5s ease;
	-o-transition: height .5s ease;
	transition: height .5s ease;
}

#stage {
	position: absolute;
	top: 0;
	left: 20%;
	width: 80%;
	clear: both;
	overflow:hidden;
	height: 100vh;
}

#nav {
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	clear: both;
	padding: 2rem;
}

#readout {
	line-height: 1.3em;
	text-align: left;
}

.model-card,
.pdf-card,
.sub-card {
	padding: 1rem 0;
	text-align: center;
	cursor: pointer;
}

.model-card h1,
.pdf-card h1,
.sub-card h1 {
	font-size: 1.0rem;
	margin-top: 1rem;
	font-weight: bold;
	margin-bottom: .3rem;
}

.model-card h2,
.pdf-card h2,
.sub-card h2 {
	font-size: .9rem;
	margin-bottom: .3rem;
}

.model-card h3,
.pdf-card h3,
.sub-card h3 {
	font-size: .7rem;
	margin-bottom: 0;
}

.model-circle {
	border: .25rem solid white;
	pointer-events: none;
}

.pdfobject-container {
	height: 100vh;
	width: 100%;
	}
.pdfobject { border: 1px solid #666; }

.img-fluid {
    max-width: 70%;
    height: auto;
}

/* some five column sorcery */

.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

.col-xs-15 {
    width: 20%;
    float: left;
}
@media (min-width: 768px) {
.col-sm-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-15 {
        width: 20%;
        float: left;
    }
}

@media (max-width: 1919px) {

	.model-card h1,.pdf-card h1 { font-size: 1.0rem; margin-bottom: .1rem; }
	.model-card h2,.pdf-card h2 { font-size: .8rem; margin-bottom: .2rem; }
	.model-card h3,.pdf-card h3 { font-size: .6rem; }

	.model-circle { border: .25rem solid white; }

}