body {
	/*background-image: url("../images/background-linework1-03.png");*/
	background-repeat: no-repeat;
	background-color: black;
	font-family: 'Oswald', sans-serif;
	font-size: 1.5vw;
	font-weight: lighter;
	color: #999999;
	margin: 0px;
	padding: 0px;
	margin-left: 8px;
	margin-right: 8px;
	/*background-size: viewport.width*/

}

body::-webkit-scrollbar {
	width: 2vw;
}

body::-webkit-scrollbar-track {
	background-color: none;
}

body::-webkit-scrollbar-thumb {
	/*background: linear-gradient(red, yellow);
	border-radius: 1vw;*/

	background-image: url("../../images/scrollthumb-v2-wht.svg");
	background-repeat: no-repeat;
	/*background-size: 100%;*/
}

p {
	padding: 25px;
	margin: 0px;
}

#top_model {
	position: absolute;
	top: 0;
	left: 0;
	width: 98.75vw;
	height: 120vh;
	margin: 0;
	padding: 0;
	z-index: 5;
}

.red_block {
	background-color: rgba(155,0,50,1.0);
	color: #999999;
}

.blue_block {
	background-color: rgba(15,15,125,1.0);
	color: #999999;
}

.end_block{
	background-color: #484848;
	color: #999999;
	grid-row-end: span 3;
	height: 90%;
}

.model_label {
	font-family: monospace;
	font-size: 1vw;
	position: block;
	margin-top: -5vh;
	text-align: right;
}

.sequence_label {
	font-size: 1.75vw;
	position: relative;
	top: -10vh;
	text-align: left;
	color: gainsboro;
	margin-left: -1vw;

}

.thick_desc {
	background-color: none;
	font-family: 'Alice', serif;
	line-height: 1.75;
	padding-left: 15vw;
	padding-right: 15vw;

}

.citation {
	font-size: 1.1vmax;
	line-height: 1;
}

.orbit-nav {
	position: absolute;
	margin-top: -11%;
	margin-left: 1%;
	animation: blink_fade 6s linear 10s forwards;
}

@keyframes blink_fade {
	10% {opacity: 0;}
	29% {opacity: 0;}
	30% {opacity: 1;}
	40% {opacity: 0;}
	49% {opacity: 0;}
	50% {opacity: 1;}
	60% {opacity: 0;}
	69% {opacity: 0;}
	70% {opacity: 1;}
	100% {opacity: 0;}
}


/*BELOW FOR MOBILE-NAV*/
:root {
	--navb-width: 18vw;
	--navb-gap: 1.5vh;
	--navb-margin: 1vw;
}
#mobile_nav {
	position: fixed;
	display: none;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;

	pointer-events: none;
	z-index: 10;
}
.navb {
	background-color: white;
	width: var(--navb-width);
	height: var(--navb-width);
	justify-content: center;

	pointer-events: auto;
	-webkit-clip-path: circle(50% at center);
	clip-path: circle(50% at center);
}

#navb-scroll_up{
	position: absolute;
	top: calc((50vh - (0.5 * var(--navb-gap))) - var(--navb-width));
	left: calc(100vw - var(--navb-margin) - var(--navb-width));
}
#navb-scroll_down{
	position: absolute;
	top: calc(50vh + (0.5 * var(--navb-gap)));
	left: calc(100vw - var(--navb-margin) - var(--navb-width));
}
.scroll_svg {
	position: absolute;
	width: 60%;
	height: 60%;
	top: 20%;
	left: 20%;
}

#navb-contact {
	position: absolute;
	display: flex;
	top: calc(50vh + (2.5 * var(--navb-gap)) + (3 * var(--navb-width)));
	left: calc(100vw - var(--navb-margin) - var(--navb-width));
	justify-content: center;

	transition: width 3s, height 3s, top 3s, left 3s;
}
#navb-contact > p {
	margin: 0;
	padding: 0;
	font-size: calc(var(--navb-width) / 4);
	text-align: center;
	display: flex;
	line-height: var(--navb-width);

	transition: font-size 3s, line-height 3s;
}
#navb-contact.expanded {
	width: 100vh;
	height: 100vh;
	top: 0;
	left: calc((100vw - 100vh) / 2);
}
#navb-contact.expanded > p {
	font-size: 12vmax;
	line-height: 100vh;
}

#navb-index {
	position: absolute;
	top: calc(50vh + (1.5 * var(--navb-gap)) + (2 * var(--navb-width)));
	left: calc(100vw - var(--navb-margin) - var(--navb-width));
	background-color: yellow;

	transition: width 3s, height 3s, top 3s, left 3s;
}
#navb-index > svg {
	width: calc(2 * var(--navb-width));
	height: calc(2 * var(--navb-width));
	margin-top: calc(-0.5 * var(--navb-width));
	margin-left: calc(-0.5 * var(--navb-width));

	transition: width 3s, height 3s, margin-top 3s, margin-left 3s;
}
#navb-index.expanded {
	width: 100vh;
	height: 100vh;
	top: 0;
	left: calc((100vw - 100vh) / 2);
}
#navb-index.expanded > svg {
	width: 150vh;
	height: 150vh;
	margin-top: -25vh;
	margin-left: -25vh;
}


#top_model {
	width: 100vw;
}


.label_img {
	font-family: monospace;
	font-size: 1vw;
	color: yellow;
	position: block;
	margin-top: -6vh;
	text-align: right;
}

.label_nume {
	font-size: 4vw;
	text-align: right;
	color: yellow;
	margin-bottom: 0vh;
}

.label_numw {
	font-size: 4vw;
	text-align: left;
	color: yellow;
	margin-bottom: 0vh;
}

.label_figinline {
	color: yellow;
}

.label_fige {
	font-size: 3vw;
	text-align: right;
	color: yellow;
	margin-bottom: 0vh;
	font-family: 'Alice', serif;
}

.label_figw {
	font-size: 3vw;
	text-align: left;
	color: yellow;
	margin-bottom: 0vh;
	font-family: 'Alice', serif;
}

.label_rarr {
	font-size: 3vw;
	padding: 0vw;
	margin-top: -3vh;
	text-align: right;
}

.label_larr {
	font-size: 3vw;
	padding: 0vw;
	margin-top: -3vh;
	text-align: left;
}

.free_labelr {
	font-size: 1.25vw;
	text-align: right;
	padding: 0vw;
	margin-bottom: 0vw;
}

.free_labell {
	font-size: 1.25vw;
	text-align: left;
	padding: 0vw;
	margin-bottom: 0vw;
}



/*cell size: 24vw x 60vh;
21 cells down is 1260vh*/
#sidenav1 {
	position: absolute;
	width: 15%;
	height: 100vh;
	top: 400vh;
	margin-top: 0vh;
	margin-left: 0;
	display: inline-block;

}

.nav_button {
	position: relative;

	transition: transform ease-in 0.5s;
	transform-origin: 0% 50%;
	transition-delay: 0.2s;

}

.nav_button:hover {
	transform: scale(1.35, 1.35);
}

.navb_cont {
	position: relative;
	left: 12%;
	top: 3vh;
	height: 14vh;
	width: 14vh;
	margin-right: -4vh;
}

.navb_text {
	padding: 0;
	position: absolute;
	text-align: center;
	font-size: 3vh;
	top: 5.5vh;
	line-height: 1;
	color: black;
	opacity: 0%;

}

.navb_text:hover {
	opacity: 100%;
}

.navb_img {
	position: absolute;
	
}

.navb_img:hover {
	opacity: 0%;
}

.navb_link: {
	margin: 0px;
}



a {
	color: inherit;
	text-decoration: none;
}

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

.mars:hover {
	color: blue;
}

.object_list {
	color: inherit;
	text-decoration: none;
}



h1 {
	font-size: 2vw;
	font-weight: lighter;
	margin-left: 15px;
}

.center_h1 {
	text-align: center;
	font-size: 4vw;
	margin-left: 0px;
	margin-top: 1vh;
	margin-bottom: 1vh;
	line-height: 110%;
}

div {
	/*margin: -4px;*/
	/*padding: -4px;*/
}

ol {
	list-style: none;
	counter-reset: li;
}

li {
	counter-increment: li;
}

li::before {
	content: counter(li);
	color: yellow;
	display: inline-block;
	width: 1vw;
	margin-left: -1vw;
}

img {
	margin: 0px;
}

iframe.fullsize {
	width: 100%;
	height: 100%;
}

.nameplate {
	display: inline-block;
	margin-top: 8px;
	height: 10vh;
	width: 100%;
}
.OA_nameplate {
	position: absolute;
	width: 50%;
	left: 25%;
	top: 10px;
}
.back_button {
	display: inline-block;
	float: right;
	margin-right: 20px;
	margin-bottom: 20px;
}

.foot {
	margin-top: 8px;
	margin-bottom: 8px;
}

#geiringer1 {
	width: 27vw;
}
#back_arrow {
	display: inline-block;
	float: right;
	margin-right: 20px;
}

.OA_gallery1 {
	margin-top: 100vh;
	display: grid;
	grid-gap: 0.5vw;
	grid-template-columns: repeat(8, 1fr);
	grid-template-rows: 24vh;
	grid-auto-rows: 24vh;
	overflow: hidden;
}

.photo_gallery{
	padding: 0.5vw;
	display: grid;
	grid-gap: 0.5vw;
	grid-template-columns: repeat(8, 1fr); /*NOTE: i tried to make this 4 columns but it seems to get glitched by parent definition?*/
	grid-template-rows: 24vh;
	grid-auto-rows: 24vh;
	overflow: hidden;
}

.g_item {
	box-sizing: border-box;
	width: 100%;
	margin: 0px;
	overflow: hidden;
	object-fit: cover;
}
.g_item.span1 {
	grid-column-end: span 1;
}
.g_item.span2 {
	grid-column-end: span 2;
}
.g_item.span3 {
	grid-column-end: span 3;
}
.g_item.span4 {
	grid-column-end: span 4;
}
.g_item.span5 {
	grid-column-end: span 5;
}
.g_item.span6 {
	grid-column-end: span 6;
}
.g_item.span7 {
	grid-column-end: span 7;
}
.g_item.span8 {
	grid-column-end: span 8;
}

.g_image {
	width: 100%;
	height: 100%;
	margin: 0px;
	overflow: hidden;
	object-fit: cover;
}

.spacer2 {
	grid-row-end: span 2;
}
.spacer3 {
	grid-row-end: span 3;
}

.eq_text {
	text-align: center;
	font-size: 24vh;
	margin-top: 6vh;
	padding: 0;
	color: gainsboro;
}

.t_sequence {
	grid-column-end: span 2;
	background-color: rgba(255,255,255,0.9);
}

#PAST_desc {
	grid-row-end: span 8;
}
#PRESENT_desc {
	grid-row-end: span 9;
}
#FUTURE_desc {
	grid-row-end: span 9;
}
#TOTAL_desc {
	grid-row-end: span 9;
}

#fig1_text {
	grid-row-end: span 2;
}
#fig1_image {
	grid-row-end: span 2;
}

#fig2_text {
	grid-row-end: span 2;
}
#fig2_image {
	grid-row-end: span 2;
}

#fig3_text {
	grid-row-end: span 3;
}
#fig3_image {
	grid-row-end: span 3;
}

#PAST_pgallery {
	grid-row-end: span 10;
	background-color: lightgrey;
}
#PRESENT_pgallery {
	grid-row-end: span 14;
	background-color: lightgrey;
}
#FUTURE_pgallery {
	grid-row-end: span 10;
	background-color: lightgrey;
}
#TOTAL_pgallery {
	grid-row-end: span 14;
	background-color: lightgrey;
}

/*BELOW IS FOR MOBILE, DUH!!!!*/

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

body {
	font-size: 2.5vmax;
	margin-left: 1vw;
	margin-right: 1vw;
	background-size: 97%;
}

#sidenav1 {
	display: none;
}

#mobile_nav {
	display: block;
}

.OA_gallery1 {
	display: grid;
	grid-template-columns: minmax(250px, 1fr);
	grid-template-rows: 20vh;
	grid-auto-rows: 20vh;
}

.g_item {
}

.g_item.span2 {
	grid-column-end: span 1;
}
.g_item.span3 {
	grid-column-end: span 1;
}
.g_item.span4 {
	grid-column-end: span 1;
}
.g_item.span5 {
	grid-column-end: span 1;
}
.g_item.span6 {
	grid-column-end: span 1;
}
.g_item.span7 {
	grid-column-end: span 1;
}
.g_item.span8 {
	grid-column-end: span 1;
}

.nameplate {
	display: inline-block;
	margin-top: 2.5vw;
	margin-left: 5vw;
	width: 90vw;
	height: 9vh;
}
#geiringer1 {
	width: 100%;
}
#back_arrow {
	display: none;
}
.OA_nameplate {
	position: absolute;
	width: 100%;
	left: 0%;
	top: 10.5vh;
}

h1 {
	font-size: 4vmax;
}
.center_h1 {
	font-size: 6vmax;
}


.eq_text {
	margin-top: 0vh;
}

.t_sequence {
	display: none;
}

.thick_desc {
	background-color: none;
	font-family: 'Alice', serif;
	line-height: 1.75;
	padding-left: 8vw;
	padding-right: 8vw;

}
#PAST_desc {
	grid-row-end: span 27;
}
#PRESENT_desc {
	grid-row-end: span 27;
}
#FUTURE_desc {
	grid-row-end: span 22;
}
#TOTAL_desc {
	grid-row-end: span 29;
}

.spacer1 {
	display: none;
}
.spacer2 {
	display: none;
	grid-row-end: span 1;
}
.spacer3 {
	display: none;
	grid-row-end: span 1;
}

.label_fige {
	font-size: 3vmax;
	text-align: center;
	color: yellow;
	margin-top: 15vh;
	font-family: 'Alice', serif;
}

.label_figw {
	font-size: 3vmax;
	text-align: center;
	color: yellow;
	margin-top: 0vh;
	font-family: 'Alice', serif;
}
.label_rarr {
	display: none;
}
.label_larr {
	display: none;
}
.free_labelr {
	font-size: 2vmax;
	text-align: right;
	padding: 0vw;
}
.free_labell {
	font-size: 2vmax;
	text-align: left;
	padding: 0vw;
}

#fig1_text {
	grid-row-end: span 2;
}
#fig1_image {
	grid-row-end: span 2;
}

#fig2_text {
	grid-row-end: span 2;
}
#fig2_image {
	grid-row-end: span 2;
}

#fig3_text {
	grid-row-end: span 2;
}
#fig3_image {
	grid-row-end: span 3;
}

.photo_gallery{
	padding: 0.5vw;
	display: inline-block;
	overflow: hidden;
}

#PAST_pgallery {
	grid-row-end: span 10;
}
#PRESENT_pgallery {
	grid-row-end: span 12;
}
#FUTURE_pgallery {
	grid-row-end: span 10;
}
#TOTAL_pgallery {
	grid-row-end: span 11;
}

.end_block {
	grid-row-end: span 6;
}


}