@font-face {
  font-family: Marguerite;
  src: url(fonts/MargueriteGrotesk2021-Regular.woff);
}

::-webkit-scrollbar {
    display: none;
}

html {
	font-family: Marguerite;
}

body {
	width: 100vw;
	height: auto !important;
	padding: 0;
	margin: 0;
	overscroll-behavior: none;
}

#index-wrapper, #index-wrapper a, #index-wrapper p, h3, h4 {
	color:black;
	text-decoration: none;
}

/*-------------------UPDATE RELATED---------------------*/

#main-content {
	position: fixed;
	width:100vw;
	height:100vh;
	background-color: transparent;
}

.main-frame {
	position: fixed;
	width:100vw;
	height:100vh;
}

#credit-logos {
	margin:5px 5px 25px 5px;
}

.credit-logo {
	margin-bottom: 20px;
	display: inline-block;
	width:65%;
	height:auto;
}

/*-------------------POTREE RELATED---------------------*/

canvas {
	z-index: 1;
	box-sizing: border-box;
	/*padding: 5px;
	border-radius: 50px;*/
	outline: none;
}

.potree-container {
	position: absolute; 
	width: 100vw; 
	height: 100vh; 
}

#potree_render_area {
	background-color: transparent;
	height: 100%;
	top: 0%;
}

/*-------------------CONTENT DIVS---------------------*/

#content {
	background-color: black;
	width: 100vw;
	height: 100vh;
	padding: 10px;
	display: grid;
	grid-gap: 5px;
	grid-template-columns: minmax(100px, 1fr) minmax(100px, 1fr) 1fr minmax(200px, 1fr);
	grid-template-rows: max-content  1fr max-content;
	box-sizing: border-box;
}

#bottom {
	background-color: transparent;
	display: grid;
  grid-column: 1 / -1;
  grid-row: 3;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: subgrid;
}

/*-------------------------------------------------------*/

.button {
	background-color: transparent;
	color: white;
	margin: 0px;
	padding: 5px;
	cursor: pointer;
	z-index: 10;
	font-size: 1.2vw;
}

.button a {
	color: white;
	text-decoration: none;
}

.button:hover {
	text-shadow: 0 0 8px rgba(255, 255, 0,0.8),
               0 0 1em rgba(255, 255, 0,0.9);
}

#home-button{
	background-color: transparent;
	width: fit-content;
	grid-column: 1 / span 2;
	grid-row: 1;
	cursor: default;
}

#transcript-button {
	width: fit-content;
	grid-column:3;
	grid-row: 3;
	justify-self: center;
}

#centerview-button {
	width: fit-content;
	grid-column:4;
	grid-row: 3;
	justify-self: center;
}

#help-button{
	width: fit-content;
	grid-column: 7;
	grid-row: 3;
	justify-self: end;
}

#info-button {
	width: fit-content;
	grid-column: 7;
	grid-row: 3;
	justify-self: start;
}

#privacy-policy-button, #imprint-button {
	font-size: 0.9vw;
	margin-top: 20px;
	padding-left: 5px;
}

#privacy-policy-button:hover, #imprint-button:hover {
	text-decoration: underline;
	cursor: pointer;
}

/*-----------------MENU--------------------*/

#menu {
	grid-column: 3 / 5;
	grid-row: 1;
	justify-self: end;
	border: 1px solid white;
	border-radius: 10px;
	z-index: 10;
}

select#dropdown {
	font-family: "Marguerite";
	font-size: 1.1vw;
	background: transparent;
	color: white;
	padding: 7px;
	margin-left: 0px;
	width: max-content;
	height: auto;
	border: none;
	outline: none;
	webkit-appearance: none;
}

.option {
	font-family: "Helvetica";
	background: white;
	color: black;
}


/*--------------------AUDIO PLAYER--------------------*/

.mobile-rwd-fwd {
	display: none;
	visibility: hidden;
}

#startButton {
	grid-column: 1;
	grid-row: 3;
	width: fit-content;
	justify-self: start;
}

#startButton.inactive {
	display: none;
}

#startButton:hover, #pauseButton:hover {
	cursor: pointer;
}

#pauseButton {
	grid-column: 1;
	grid-row: 3;
	display: none;
	border: none;
	justify-self: start;
}

#pauseButton.active {
	display: block;
	width: fit-content;
}

/*------------- CNTRL ------------*/

#ctrl {
	grid-column: 2 / span 1;
	grid-row: 3;
	background-color: transparent;
	display: flex;
  	justify-self: start;
	align-self: center;
}

#forwardButton {
	display: none;
	justify-self: end;
}

#rewindButton {
	display: none;
	justify-self: end;
}

#timecode {
	display: none;
	justify-self: end;
	min-width: 4ch;
}

#slash {
	display: none;
	justify-self: end;
}

#duration {
	display: none;
	justify-self: end;
	min-width: 3ch;
}

#forwardButton.active {
	grid-column: 2;
	grid-row: 3;
	display: flex;
	margin-left: 5px;
	align-self: center;
}

#rewindButton.active {
	grid-column: 2;
	grid-row: 3;
	display: flex;
	margin-right: 5px;
	align-self: center;
}

#timecode.active {
	grid-column: 2;
	grid-row: 3;
	display: flex;
	justify-self: end;
	padding: 5px;
	pointer-events: none;
}

#slash.active{
	display: flex;
	grid-column: 2;
	grid-row: 3;
	justify-self: center;
}

#duration.active {
	grid-column: 2;
	grid-row: 3;
	display: flex;
	justify-self: end;
	pointer-events: none;
}

.player-button img {
   height: auto;
   max-height: 1.2vw; 
}


/*---------------------Contents---------------------*/

#mobile-pop-up {
	display: none;
	visibility: hidden;
}

#transcript{
	left: -100vw;
	opacity: 0;
	position: relative;
	background-color: rgba(0, 0, 0, 0.6);
	/*backdrop-filter: blur(10px);*/
	color: black;
	grid-column: 1 / span 2;
	grid-row: 2;
	z-index: 10;
	transition: 0.5s ease;
	overflow-y: scroll;
	border-radius: 12px;
}

#transcript.active {
	opacity: 1;
	left: 0px;
}

#info {
	color: white;
	position: relative;
	opacity: 0;
	right: -100%;
	background-color: rgba(0, 0, 0, 0.6);
	/*backdrop-filter: blur(10px);*/
	grid-column: 3 / span 2;
	grid-row: 2;
	z-index: 10;
	transition: 0.5s ease;
	overflow: auto;
	border-radius: 12px;
}

#info.active {
	opacity: 1;
	right: 0 ;
	transition: 0.5s ease;
}

#help{
	opacity: 0;
	visibility: hidden;
	grid-column: 4;
	grid-row: 2;
	z-index: 2;
	align-self: center;
	justify-self: end;
	transition: 0.5s ease;
}

#help.active {
	opacity: 1;
	visibility: visible;
	justify-self: end;
}

#help img {
	width: 180px;
	height: auto;
	border-radius: 12px;
}

#privacy-policy {
	display: none;
	visibility: hidden;
}

#privacy-policy.visible {
	display: inherit;
	visibility: visible;
}

#imprint {
	display: none;
	visibility: hidden;
}

#imprint.visible {
	display: inherit;
	visibility: visible;
}

.content-left {
	width: 50%;
	height: auto;
	float: left;
}

.content-right {
	width: 50%;
	height: auto;
	float: right;
	left: 50%;

}

/*-----------------------VIDEO---------------------------*/

#tutorial {
	display: none;
	background-color: rgba(0, 0, 0,1);
	grid-column: 2 / span 2;
  grid-row: 2;
  z-index: 10;
  border-radius: 20px;
  align-self: center;
}


#tutorial.active {
	display: inherit;
}

#tutorial-video {
	width: 100%;
}

#disclaimer {
	display: none;
	background-color: rgba(0, 0, 0,1);
	grid-column: 2 / span 2;
	grid-row: 2;
	z-index: 10;
	border-radius: 20px;
	align-self: center;
}

#disclaimer.active {
	display: inherit;
}

#video-bg {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
  display: none;
  visibility: hidden;
}

#video-bg.active {
	display: inherit;
	visibility: visible;
}

/*--------------------TYPE AND TEXT----------------------*/

.button p {
	margin: 0;
	padding: 0;
	font-size: 1.2vw;
  line-height: 1.75vw;
}

h1 {
	font-size: 1.2vw;
	padding: 0px 0px 20px 5px;
	color: white;
	line-height: 1.7vw;
}

h2 {
	font-size: 0.9vw;
	padding-left: 5px;
	color: white;
	text-shadow: 0 0 8px rgba(255, 255, 0,0.6),
               0 0 1em rgba(255, 255, 0,0.7);
}

.running-text {
	color: white;
	padding: 0px 5px 12px 5px;
	font-size: 0.9vw;
  line-height: 1.6vw;
}

.credits {
	color: white;
	padding: 0px 0px 8px 5px;
	font-size: 0.9vw;
  line-height: 1.2vw;
}

.credits a {
	color: rgba(255, 255, 255, 1.0);
	text-decoration: none;
}

.credits a:hover {
	text-decoration: underline;
}

.credits-underline {
	color: white;
	padding: 0px 0px 0px 5px;
	font-size: 0.9vw;
  line-height: 0.5vw;
  text-decoration: underline;
}

.privacy-imprint {
	display: inline;
	font-size: 0.9vw;
	padding-top: 20px;
	color: white;
}

.quote {
	font-family: "Times";
	color: white;
	padding: 0px 5px 12px 5px;
	font-size: 1vw;
  line-height: 1.6vw;
}

em {
	font-family: "Times";
	font-size: 1vw;
}

/*-------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/
/*---------------------------------------  MEDIA QUERIES  -----------------------------------*/
/*-------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/

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

				body {
					position: fixed;
					height: calc(100vh - env(safe-area-inset-bottom));
				}

				#content {
					padding: 6px;
					grid-gap: 6px;
					grid-template-columns: 1fr 1fr;
					grid-template-rows: max-content 1fr max-content;
					height: 100%;
					height: -webkit-fill-available;
				}

				#bottom {
					display: grid;
					grid-column: 1 / span 2;
					grid-row: 3;
					grid-template-columns: repeat(9, 1fr);
					grid-template-rows: subgrid;
				}

				/*-----------------BUTTON--------------------*/

				#home-button{
					grid-column: 1;
					grid-row: 1;
					cursor: default;
					align-self: center;
					justify-self: stretch;
				}

				#transcript-button {
					grid-column:8;
					grid-row: 3;
					justify-self: center;
				}

				#centerview-button {
					display: none;
					visibility: hidden;
					grid-column:2;
					grid-row: 3;
					justify-self: center;
				}

				#help-button{
					display: none;
					visibility: hidden;
					width: fit-content;
					grid-column: 2;
					grid-row: 3;
				}

				#info-button {
					width: fit-content;
					grid-column: 9;
					grid-row: 3;
					justify-self: end;
				}

				#privacy-policy-button {
					font-size: 0.9vw;
					margin-top: 20px;
					padding-left: 5px;
				}

				#imprint-button {
					font-size: 0.9vw;
					padding-left: 5px;
				}

				#menu{
					justify-self: center;
					background-color: transparent;
					grid-column: 2 / span 2;
					grid-row: 1;
					border-bottom: 1px solid white;
				}

				select#dropdown {
					font-family: "Marguerite";
					font-size: 1.1vw;
					background: transparent;
					color: white;
					padding: 7px;
					margin-left: 0px;
					width: 100%;
					height: auto;
					border: none;
					outline: none;
			}

				/*-----------------AUDIO-------------------*/

				#startButton {
					grid-column: 1 / span 3;
					grid-row: 3;
					width: fit-content;
					justify-self: start;
				}

				#startButton.inactive {
					display: none;
				}

				#startButton:hover, #pauseButton:hover {
					cursor: pointer;
				}

				#pauseButton {
					grid-column: 1 / span 3;
					grid-row: 3;
					display: none;
					border: none;
					justify-self: start;
				}

				#pauseButton.active {
					display: block;
					width: fit-content;
				}

				/*------------- CNTRL ------------*/

				#ctrl {
					grid-column: 4 / 7;
					grid-row: 3;
					justify-self: center;
				}

				.mobile-rwd-fwd {
					display: inline;
					opacity: 1;
					visibility: visible;
					font-size: 2.8vw;
					color: white;
				}

				#ctrl img {
					visibility: visible;
				}

				#forwardButton {
					display: none;
					justify-self: end;
				}

				#rewindButton {
					display: none;
					justify-self: end;
					grid-column: 3;
					justify-self: end;
				}

				#timecode {
					display: none;
					justify-self: start;
					align-self: end;
				}

				#slash {
					display: none;
					justify-self: end;
				}

				#duration {
					display: none;
					justify-self: end;
				}

				#rewindButton.active {
					display: flex;
					padding: 0;
					align-self: center;
					margin-right: 10px;
				}

				#forwardButton.active {
					display: flex;
					padding: 0;
					align-self: center;
				}

				#timecode.active {
					font-size: 2.8vw;
					align-self: center;
					padding: 0;
				}

				#slash.active{
					font-size: 2.8vw;
					align-self: center;
					padding: 0;
				}

				#duration.active {
					font-size: 2.8vw;
					align-self: center;
					padding: 0;
				}

				.player-button img {
				   height: auto;
				   max-height: 2.8vw; 
				}


				/*-----------------CONTENTS--------------------*/

				#mobile-pop-up {
					z-index: 100;
					background-color: rgba(0, 0, 0, 0.7);
					display: inherit;
					grid-column: 1 / span 2;
					grid-row: 2;
					padding: 3px;
					border-radius: 20px;
					transition: 1s ease;
					height: fit-content;
					align-self: end;
					justify-self: center;
				}

				#mobile-pop-up.inactive {
					transition: 1s ease;
					display: none;
				}

				#transcript{
					grid-column: 1 / span 2;
					grid-row: 2;
				}

				#info {
					grid-column: 1 / span 2;
					grid-row: 2;
				}

				#help{
					grid-column: 2;
					grid-row: 2;
				}

				.content-left {
					width: 100%;
					height: auto;
					overflow-y: scroll;
				}

				.content-right {
					width: 100%;
					height: auto;
					left: 50%;
					overflow-y: hidden;
				}

				/*-----------------------VIDEO---------------------------*/

				#tutorial {
					display: none;
					visibility: hidden;
					background-color: rgba(0, 0, 0,1);
					grid-column: 2 / span 2;
					grid-row: 2;
					z-index: 10;
					border-radius: 20px;
					align-self: center;
				}

				#tutorial.active {
					display: inherit;
				}

				#tutorial-video {
					width: 100%;
				}

				#disclaimer {
					display: none;
					background-color: rgba(0, 0, 0,1);
					grid-column: 2 / span 2;
					grid-row: 2;
					z-index: 10;
					border-radius: 20px;
					align-self: center;
				}
				
				#disclaimer.active {
					display: inherit;
				}

				/*--------------------TYPE AND TEXT----------------------*/

				select#dropdown {
					padding: 5px;
					font-size: 2.8vw;
					background-color: transparent;
				}

				.button p {
					font-size: 2.9vw;
				}

				h1 {
					font-size: 3.5vw;
					line-height: 5vw;
					padding: 5px;
					color: white;
				}

				h2 {
					font-size: 2.8vw
				}

				.running-text {
					color: white;
					padding: 5px;
					font-size: 2.6vw;
				  line-height: 4vw;
				}

				.privacy-imprint {
					display: inline;
					font-size: 3vw;
				  line-height: 3.6vw;
					padding-top: 20px;
					color: white;
				}

				.button:hover {
					text-shadow: none;
				}

				.quote {
					font-family: "Times";
					color: white;
					padding: 0px 5px 12px 5px;
					font-size: 3vw;
				  	line-height: 3.7vw;
				}

				em {
					font-family: "Times";
					font-size: 3vw;
				}

				.credits {
					color: white;
					padding: 0px 0px 8px 5px;
					font-size: 2.8vw;
				  line-height: 3.2vw;
				}

				.credits-underline {
					color: white;
					padding: 0px 0px 0px 5px;
					font-size: 2.8vw;
				  line-height: 0.5vw;
				  text-decoration: underline;
				}

				.privacy-imprint {
					display: inline;
					font-size: 2.8vw;
					padding: 0;
					color: white;
				}

				.mobile-info {
					color: white;
					padding: 0px 0px 8px 5px;
					font-size: 2.4vw;
				  line-height: 3vw;
				}
}

/*-------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/
/*---------------------------------------  BIG SCREENS --------------------------------------*/
/*-------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/


@media screen and (min-width: 1920px) {

				#menu{
					grid-column: 4;
					grid-row: 1;
					justify-self: end;
					border: 1px solid white;
					border-radius: 10px;
					z-index: 10;
				}

				select#dropdown {
					font-family: "Marguerite";
					font-size: 0.8vw;
					background: transparent;
					color: white;
					padding: 17px;
					margin-left: 0px;
					width: 100%;
					height: auto;
					border: none;
					outline: none;
					webkit-appearance: none;
				  	-moz-appearance: none;
				}

				.option {
					font-family: "Helvetica";
					background: white;
					color: black;
				}

				/*--------------------AUDIO PLAYER--------------------*/

			.mobile-rwd-fwd {
				display: none;
				visibility: hidden;
			}

			#startButton {
				grid-column: 1;
				grid-row: 3;
				width: fit-content;
				justify-self: start;
			}

			#startButton.inactive {
				display: none;
			}

			#startButton:hover, #pauseButton:hover {
				cursor: pointer;
			}

			#pauseButton {
				grid-column: 1;
				grid-row: 3;
				display: none;
				border: none;
				justify-self: start;
			}

			#pauseButton.active {
				display: block;
				width: fit-content;
			}

			/*------------- CNTRL ------------*/

			#ctrl {
				grid-column: 2 / span 1;
				grid-row: 3;
				background-color: transparent;
				display: flex;
			  	justify-self: start;
				align-self: center;
			}

			#ctrl img {
				width: 50px;
				height: auto;
			}

			#forwardButton {
				display: none;
				justify-self: end;
			}

			#rewindButton {
				display: none;
				justify-self: end;
			}

			#timecode {
				display: none;
				justify-self: end;
			}

			#slash {
				display: none;
				justify-self: end;
			}

			#duration {
				display: none;
				justify-self: end;
			}

			#forwardButton.active {
				grid-column: 2;
				grid-row: 3;
				display: flex;
				margin-left: 40px;
				align-self: center;
			}

			#rewindButton.active {
				grid-column: 2;
				grid-row: 3;
				display: flex;
				margin-right: 40px;
				align-self: center;
			}

			#timecode.active {
				grid-column: 2;
				grid-row: 3;
				display: flex;
				justify-self: end;
				padding: 5px;
				width: 90px;
				pointer-events: none;
			}

			#slash.active{
				display: flex;
				grid-column: 2;
				grid-row: 3;
				justify-self: center;
			}

			#duration.active {
				grid-column: 2;
				grid-row: 3;
				display: flex;
				justify-self: end;
				pointer-events: none;
			}
				
}

/* Safari 7.1+ 

_::-webkit-full-page-media, _:future, :root .safari_only {

	#content {
		padding: 6px;
		grid-gap: 6px;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: max-content 1fr max-content 78px;
	}
  
  }

  */