@charset "utf-8";
/* CSS Document */
:root {
	--brand-blue-100:rgba(18,143,204,1);
	--brand-blue-75a:rgba(18,143,204,0.75);
	--brand-brown-100:rgba(150,100,50,1);
	--brand-brown-75a:rgba(150,100,50,0.75);
	--brand-brown-light-100: rgba(175,130,80,1);
	--brand-brown-light-75a: rgba(175,130,80,0.75);
	--paper:#282828;
	--paper-darker:#141414;
	--paper-lighter:#424242;
	--cube-width:3rem;
	--cube-transZ:1.5rem;
	--nav-height:7rem;
	--content-max-width:1400px;
	--content-part-max-width:700px;
	--clipboard-bg-100:rgba(60,120,50,1);
}
/* roboto-100 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  src: url('/fonts/roboto-v30-latin-100.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/roboto-v30-latin-100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/roboto-v30-latin-100.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/roboto-v30-latin-100.woff') format('woff'), /* Modern Browsers */
       url('/fonts/roboto-v30-latin-100.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/roboto-v30-latin-100.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-100italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 100;
  src: url('/fonts/roboto-v30-latin-100italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/roboto-v30-latin-100italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/roboto-v30-latin-100italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/roboto-v30-latin-100italic.woff') format('woff'), /* Modern Browsers */
       url('/fonts/roboto-v30-latin-100italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/roboto-v30-latin-100italic.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/roboto-v30-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/roboto-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/roboto-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/roboto-v30-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/fonts/roboto-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/roboto-v30-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: url('/fonts/roboto-v30-latin-italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/roboto-v30-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/roboto-v30-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/roboto-v30-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('/fonts/roboto-v30-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/roboto-v30-latin-italic.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-700 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('/fonts/roboto-v30-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/roboto-v30-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/roboto-v30-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/roboto-v30-latin-700.woff') format('woff'), /* Modern Browsers */
       url('/fonts/roboto-v30-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/roboto-v30-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-700italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: url('/fonts/roboto-v30-latin-700italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/roboto-v30-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/roboto-v30-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/roboto-v30-latin-700italic.woff') format('woff'), /* Modern Browsers */
       url('/fonts/roboto-v30-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/roboto-v30-latin-700italic.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* schoolbell-regular - latin */
@font-face {
  font-family: 'Schoolbell';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/schoolbell-v18-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/schoolbell-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/schoolbell-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/schoolbell-v18-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/fonts/schoolbell-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/schoolbell-v18-latin-regular.svg#Schoolbell') format('svg'); /* Legacy iOS */
}
*,html{
	margin:0;
	padding:0;
	box-sizing: border-box;
}
html{
	font-size:100%;
}
body{
	font-family: "Roboto",Arial,sans-serif;
	background-color: var(--paper);
	color:#e3e3e3;
}
header{
	z-index: 1;
}
h1{
	font-family: 'Schoolbell';
	font-style: normal;
	font-weight: 400;
	font-size:2.5rem;
	line-height: 3rem;
	margin:1rem 0;
	max-width: var(--content-max-width);
}
h1 span.icon{
	margin-bottom:1rem;
	width:5rem;
	height:5rem;
	display:inline-flex;
	align-items: center;
	justify-content: center;
	border:1px solid rgba(255,255,255,0.25);
	border-radius:50%;
	color: rgba(255,255,255,0.25);
}
h1 span.icon > *{
	margin:0;
	padding:0;
}
h2{
	font-family: 'Schoolbell';
	font-style: normal;
	font-weight: 400;
	font-size:2rem;
	line-height: 2.25rem;
	max-width: var(--content-max-width);
	margin-bottom:1rem;
}
#object-list > h2 {
	margin:2rem 0;
	color:var(--brand-brown-light-100);
	text-align: center;
}
h3{
	font-family: 'Schoolbell';
	font-style: normal;
	font-weight: 400;
	font-size:1.5rem;
	line-height: 1.25rem;
	max-width: var(--content-max-width);
}
p{
	max-width: var(--content-max-width);
	margin-bottom:0.5rem;
}
.legal{
	color:rgba(255,255,255,0.5);
	font-size: 0.75rem!important;
}
 .valid{
	display: block;
    width:100%;
	text-align: center;
}
@media (width < 430px) {
	p{
		font-size:0.8rem;
	}
	.legal{
		font-size: 0.6rem;
	}
	h2{
		font-size:1.5rem;
		line-height: 1.75rem;
	}
}
a{
	color:var(--brand-blue-100);
}
button{
	all:unset;
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
	text-decoration: none;
	display:inline-flex;
	white-space: nowrap;
	justify-content: center;
	align-items: center;
}
button.cta{
	background-color:var(--brand-brown-100);
	box-shadow: 0px 0.1rem 0px 0px rgba(0, 0, 0, 0.25);
	font-size: 1.5rem;
	padding: 1rem 2rem;
	margin: 0.5rem 1rem;
	border-radius:0.5rem;
	color: #FFF;
}
@media (width < 430px){
	button.cta{
		font-size:1rem;
		padding:0.5rem 1rem;
		margin:0.25rem 0.5rem;
		border-radius:0.25rem;
	}
}
button.cta i{
	margin-right:1rem;
}
button:hover.cta{
	font-style: oblique;
	background-color: var(--brand-brown-light-100);
	box-shadow: 0px 0.1rem 0px 0px rgba(0, 0, 0, 0.25), inset 0px 0.25rem 0px 0px rgba(0, 0, 0, .25);
}
button.cta.small{
	background-color:var(--brand-brown-100);
	box-shadow: 0px 0.1rem 0px 0px rgba(0, 0, 0, 0.25);
	font-size: 1rem;
	padding: 0.5rem 0.75rem;
	margin: 0.25rem 0.5rem;
	border-radius:0.25rem;
	color: #FFF;
}
button.cta.small i{
	margin-right:0;
}
button:hover.cta.small{
	font-style: oblique;
	background-color: var(--brand-brown-light-100);
	box-shadow: 0px 0.1rem 0px 0px rgba(0, 0, 0, 0.25), inset 0px 0.125rem 0px 0px rgba(0, 0, 0, .25);
}
button.cta.small.round{
	padding: 0;
	margin:0.15rem 0 0;
	border-radius:50%;
	width:2.75rem;
	height:2.75rem;
	font-size:1.5rem;
}
button.keyword{
	font-size:1rem;
	padding:0.15rem 0.25rem;
	border-radius:0.25rem;
	background-color:rgba(255,255,255,0);
	margin:0.15rem 0.25rem;
	transition:all 0.15s ease-in-out;
	border:1px solid rgba(255,255,255,0.1);
	color:rgba(255,255,255,0.25);
}
div.filter.bigger button.keyword{
	font-size:1.2rem;
	padding:0.25rem 0.5rem;
	border-radius:0.5rem;
	border:1px solid rgba(255,255,255,0.75);
	color:rgba(255,255,255,0.75);
}
button.text{
	padding:0.25rem 0.5rem;
	border-radius:0.5rem;
	margin:0rem 0.5rem;
	transition:all 0.15s ease-in-out;
	border:1px solid rgba(255,255,255,0.25);
	color:rgba(255,255,255,1);
}
span.numberedList{
	width:3rem;
	height:3rem;
	border-radius:1.5rem;
	display:inline-flex;
	align-items: center;
	justify-content: center;
	background-color:var(--brand-blue-100);
}
@media (width < 430px) {
	button.keyword{
		font-size:0.85rem;
	}
}
button.keyword:hover,
#stageWelcome button.keyword:hover{
	background-color:rgba(255,255,255,1);
	color:rgba(0,0,0,1);
}
div.filter.bigger button.keyword:hover{
	background-color:rgba(255,255,255,1);
	color:rgba(0,0,0,1);
}
#stageWelcome button.keyword{
	background-color:var(--paper);
	color:rgba(255,255,255,0.75);
	border-color:rgba(255,255,255,0.75);
}
button.keyword.active{
	border:1px solid var(--brand-blue-100);
	color:var(--brand-blue-100);
}

header{
	
	display:flex;
	position: fixed;
	flex-direction: column;

	width:100%;

	pointer-events: none;

	/*border:1px solid red;*/
}
header nav{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	width:100%;
	padding:0.5rem 1.5rem 3rem;
	font-family: 'Schoolbell';
	font-style: normal;
	font-weight: 400;
	
	pointer-events: none;

	backdrop-filter:blur(5px);
	mask-image: linear-gradient(rgb(255, 255, 255) 0%, rgb(255,255,255) 60%, transparent 100%);
/*    -webkit-mask-image: linear-gradient(rgb(27, 22, 22), transparent);
*/
	/*border:1px solid pink;*/
	opacity:1;
	transition:all 0.5s ease-out;

}
header nav.loading{
	opacity:0;
}
header nav:hover{
	transition:all 0.25s ease-out;
}
/*
header nav*/
#chapter{
	display: flex;
	flex-direction: row;
	align-items:center;
	pointer-events: all;
	cursor:default;
}
#chapter:not(.unclickable){
	cursor:pointer;
}
#chapter div.cube-control{}
#chapter div.cube-container{
	perspective: 900px;
	cursor: default;
	pointer-events: none;
	filter: drop-shadow(4px 2px 10px rgba(0,0,0,0.25));
}
#chapter div.cube{
	width:var(--cube-width);
	height:var(--cube-width);
	transform-style: preserve-3d;
	transition: all 0.5s ease-out;
}
#chapter.auto div.cube{
	transition: all 5s ease-in-out;
}
#chapter div.cube-face{
	position: absolute;
	width:var(--cube-width);
	height:var(--cube-width);
	font-size:1.75rem;
	background: linear-gradient(45deg, rgba(14,114,163,1),var(--brand-blue-100) 45% 55%, rgba(14,114,163,1));
	color:#FFF;
	display:flex;
	align-items: center;
	justify-content: center;
	transition: all 0.5s ease-in-out;
}
#chapter .cube-face div.logo{
	width:75%;
	height:75%;
	display:flex;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url('/admin/img/wolkentaenzer.svg');
}
#chapter .cube-face.front{
	transform:translateZ(var(--cube-transZ));
}
#chapter .cube-face.back{
	transform:rotateY(180deg) translateZ(var(--cube-transZ));
}
#chapter .cube-face.left{
	transform:rotateY(-90deg) translateZ(var(--cube-transZ));
}
#chapter .cube-face.right{
	transform:rotateY(90deg) translateZ(var(--cube-transZ));		
}
#chapter .cube-face.top{
	transform:rotateX(90deg) translateZ(var(--cube-transZ));				
}
#chapter .cube-face.bottom{
	transform:rotateX(-90deg) translateZ(var(--cube-transZ));
}
#chapter .linkage{
	background-color:var(--brand-blue-75a);
	border-radius:0.5rem;
	/*text-shadow: 0 0 5px rgba(0,0,0,1);*/
	padding:0.5rem 0.5rem 0.5rem 4rem;
	margin-left: -3rem;
	transition: all 0.25s ease-in;
}
#chapter .linkage p{
		cursor: pointer;
		margin:0;
}
/*
header nav*/
#brand{
	display: flex;
	flex-direction: row;
	align-items:center;
	cursor:pointer;
	pointer-events: all;
}
#brand .word{
	text-align: right;
	padding:1rem;
	text-shadow: 0 0 5px rgba(0,0,0,1);
	transition: all 0.25s ease-in;
}
@media (width < 430px) {
	#brand .word{
		padding:1rem 0.5rem 1rem 0.5rem;
	}
}
#brand .word p{
	cursor: pointer;
}
#brand .logo{
	display: block;
	width:52px;
	height:50px;
	/*background-image:url('/admin/img/brand-wolkentaenzer.svg');*/
	background-size: contain;
	background-repeat: no-repeat;
	background-position: right center;
}
#brand .logo svg{
	fill:rgba(255,255,255,1);
	transition: all 0.25s ease-in;
}
/**/
#chapter:not(.unclickable):hover .linkage{
	background-color:var(--brand-brown-light-100);
	/*color:var(--brand-blue-100);*/
	transition: all 0.15s ease-out;
}
#chapter:not(.unclickable):hover div.cube-face{
	background: linear-gradient(90deg, var(--brand-brown-100), var(--brand-brown-light-100) 45% 55%, var(--brand-brown-100));
	transition: all 0.5s ease-in-out;
}
#brand:hover .word{
	color:var(--brand-blue-100);
	transition: all 0.15s ease-out;
}
#brand:hover .logo svg{
	fill:var(--brand-blue-100);
	transition: all 0.15s ease-out;
}

tr:hover button.keyword{
	border:1px solid rgba(255,255,255,0.25);
	color:rgba(255,255,255,0.5);			
}
tr:hover button.keyword:hover{
	background-color:rgba(255,255,255,1);
	color:rgba(0,0,0,1);
}
tr:hover button.keyword.active{
	border:1px solid rgba(255,255,255,1);
	color:rgba(255,255,255,1);
}
tr:hover button.keyword.active:hover{
	background-color:rgba(255,255,255,1);
	color:rgba(0,0,0,1);
}
div.filter{
	display:flex;
	flex-direction: column;
	flex-wrap: wrap;
	width:100%;
	padding:1rem 0 2rem;
	align-items: center;
	justify-content: center;
}
.filter > div{
	display:flex;
	flex-direction: row;
	flex-wrap: wrap;
	width:100%;
	align-items: center;
	justify-content: center;
}

div.ctaScroll{
	margin-top:2rem;
}
.ctaScroll div.Down{
	width:3rem;
	height:3rem;
	border-radius:1.5rem;
	border:2px solid rgba(255,255,255,1);
	background-color:rgba(0,0,0,0.25);
	cursor: pointer;
	transition: all 0.25s ease-in-out;
	box-sizing: border-box;
}
.ctaScroll .Down svg{
	width:100%;
	height:100%;
}
.ctaScroll .Down svg .clr{
	fill:rgba(255,255,255,1);
	transition: all 0.25s ease-in-out;
}
.ctaScroll div.Down:hover{
	transform: scale(1.1);
	border:2px solid var(--brand-blue-100);
}
.ctaScroll div.Down:hover svg .clr{
	fill:var(--brand-blue-100);
}
nav{
}
nav > div{
}



#videoPlayer,
#videoPlayer video{
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
#videoPlayer {
	overflow: hidden;
	background: #000;
	display: block !important;
	position: absolute;
}
#videoPlayer video{
	height: 100%;
	width: 100%;
	object-fit : cover;
}
#videoPlayer div.videoShader{
	height: 100%;
	width: 100%;
	position: absolute;
	top:0;
	left:0;
	object-fit : cover;
	background-color:rgba(0,0,0,0.75);
}
#videoPlayer div.videoPoster{
	height: 100%;
	width: 100%;
	position: absolute;
	top:0;
	left:0;
	object-fit : cover;
}
article{
	width:100%;
	min-height: 100vh;
	margin:0;
	padding:0;

	box-sizing: border-box;

	position:relative;
	top:0;
	left:0;

	/*border:1px solid rgba(0,0,255,0.5);*/
}
article > section{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;

	margin:0;
	padding:1rem;
	box-sizing: border-box;
	position: relative;
}
article > section:first-child{
	border:none;
	min-height:100vh;
}
article > section.autoHeight:first-child{
	padding-top:var(--nav-height);
	min-height:unset;
}
article > section:first-child p{
	font-size:1.25rem;
	margin-bottom:0.75rem;
}
.overview article > section:first-child,
.category article > section:first-child{
	text-align:center;
}
@media (width < 640px) {
	article > section:first-child p {
		font-size: 1rem;
		margin-bottom: 0.5rem;
	}
}
#stageBackground{
	position: absolute;
	top:0;
	left: 0;
	display: block;
	width:100%;
	height:100%;
}
#stageBackground div.canvas{
	position: absolute;
	top:0;
	left: 0;
	display: block;
	width:100%;
	height:100%;
	overflow: hidden;
}
#stageBackground .canvas div.effect{
	position: absolute;
	top:0;
	left: 0;
	display: block;
	width:100%;
	height:100%;
	--dot-bg: rgba(0,0,0,0.75);
	--dot-color: rgba(0,0,0,.5);
	--dot-size: 2px;
	--dot-space: 3px;
	background:
	linear-gradient(90deg, var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space),
	linear-gradient(var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space),
	var(--dot-color);;/*W3C*/
	background-attachment: fixed;
	opacity:1;
	transition: all 0.25s ease-in-out 1s;
	transition: all 0.5s ease-in-out 0.75s;
}
#stageBackground .canvas div.image{
	position: absolute;
	top:0;
	left: 0;
	display: block;
	width:100%;
	height:100%;

	background-position:center center;
	background-size:cover;
	background-repeat: no-repeat;
	background-attachment: fixed;

	filter:blur(5px);
	filter:blur(0px);
	opacity:1;
	transition: all 0.5s ease-in-out 0.75s;
}
#stageBackground.loading .canvas div.image{
	opacity:0;
	filter:blur(0);
	transition: all .5s ease-in-out 0.15s;
}
#stageBackground.loading .canvas div.effect{
	opacity:0;
	transition: all 0.5s ease-out 0.15s;
}
#stageWelcome{
	position: absolute;
	top:0;
	left: 0;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	width: 100%;
	height:100%;
	min-height: 100%;
	justify-content: center;
	align-items: center;
	text-align: center;
	transition: all 0.5s ease-in-out 1s;
	padding:1rem 1rem 1rem;
}
@media only screen and (width < 540px) and (height < 670px){
	#stageWelcome{
		justify-content: flex-start;
		padding:6.5rem 1rem 0;
	}
}
#stageWelcome.loading{
	opacity:0;
	transition: all 0.15s ease-out;
}

.round{
	width:3rem;
	height:3rem;
	margin:0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: 1.5rem;
	border:2px solid var(--brand-brown-100);
	color:var(--brand-brown-100);
	transition: all 0.125s ease-out;
	cursor: pointer;
}
.round:hover{
	border:2px solid var(--brand-blue-100);
	color:var(--brand-blue-100);
	transition: all 0.125s ease-in;
	transform: scale(1.1);
}
.round.cta{
	background-color: var(--brand-brown-100);
	color:rgba(255,255,255,1);
}
.round.cta:hover{
	background-color: var(--brand-blue-100);
	color:rgba(255,255,255,1);
}



div.howto-intro{
    width: 100%;
    max-width: 800px;
    display: flex;
    flex-direction: row;
}
@media only screen and (width<480px){
	div.howto-intro{
		max-width: 300px;
		flex-direction: column;
	}	
}
@media only screen and (height > 650px) and (width > 900px){
	div.howto-intro{
		max-width: 400px;
		flex-direction: column;
	}	
}
div.howto-intro > div{
	display: inline-flex;
    flex-direction: row;
    width: 100%;
    align-items: flex-start;
	margin:0.25rem 0.25rem;
	border:1px solid rgba(255,255,255,0.25);
	background-color:rgba(0,0,0,0.25);
	border-radius:0.5rem;
	cursor: pointer;
}
div.howto-intro > div > div{
	flex:1;
	align-self: center;
	justify-content: center;
}
div.howto-intro > div > div:first-child{
	flex:0;
	flex-basis: 3rem;
}
div.howto-intro div.round{
	border:2px solid rgba(255,255,255,0.5);
	color:rgba(255,255,255,0.5);
}
div.howto-intro div > div > p{
	color:rgba(255,255,255,0.5);
	text-align: left;
	margin:0;
	transition: all 0.25s ease-in-out;
}
div.howto-intro div > div > p span{
	color:var(--brand-blue-100);
	text-decoration: underline;
}
div.howto-intro div:hover{
	backdrop-filter:blur(5px);
}
div.howto-intro div:hover > div > p{
	color:var(--brand-blue-100);
}
div.howto-intro div:hover > div > p span{
	/* color:rgba(255,255,255,1);
	text-decoration: none;*/
}
div.howto-intro div:hover div.round{
	color:var(--brand-blue-100);
	border-color:var(--brand-blue-100);
	transform:scale(1.1);
}




#stageWelcome div.action{
	margin:1rem 0 3rem;
}
#stageWelcome div.keywords{
	display:flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	margin:1rem 0 0.25rem;
}
#stageWelcome .keywords > div{
	margin:0.25rem;
}
#stageWelcome h1{
	font-size:3.5rem;
	line-height: 4rem;
}
@media only screen and (width < 430px) {
	#stageWelcome h1{
		font-size:2.5rem;
		line-height: 2.75rem;
	}
}
#stageWelcome p.object-type{
	opacity:0.5;
}
#stageWelcome div.keyfacts{
	display:flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	padding:1rem;
}
#stageWelcome .keyfacts > div{
	border:1px solid rgba(255,255,255,0.5);
	margin:0.25rem;
	border-radius:0.5rem;
	display:flex;
	width:7rem;
	height:7rem;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	flex-wrap:nowrap;
}
#stageWelcome .keyfacts > div > p{
	font-size:1.25rem;
	margin:0;
}
#stageWelcome .keyfacts > div > p > span{
	font-size:1rem;
	opacity:0.5;;
}
@media (width < 430px) {
	#stageWelcome div.keyfacts{
		padding:0.5rem;
	}
	#stageWelcome .keyfacts > div{
		margin:0.25rem;
		border-radius:0.25rem;
		width:5rem;
		height:5rem;
	}
	#stageWelcome .keyfacts > div > p{
		font-size:0.85rem;
	}
	#stageWelcome .keyfacts > div > p span{
		font-size:0.75rem;
	}
}
section#object-list{
	padding:1rem;
}
section#object-list > table{
	width:100%;
	max-width: var(--content-max-width);
	border-collapse: collapse;
	margin-bottom:2rem;
}
section#object-list > table h2{
	margin:0;
}
section#object-list col.objectlist-preview{
	width:7%;
}
section#object-list col.objectlist-title{
	width:70%;
}
section#object-list col.objectlist-action{
	width:23%;
}
.thin-on{
	display:none;
}
.thin-off{
	display:block;
}
section#object-list div.listActionContent{
	display:flex;
	flex-direction: row;
	width:100%;
	justify-content: space-between;
	align-items: center;
}
@media (width < 1000px) {
	section#object-list col.objectlist-preview{
		width:5rem;
	}
	section#object-list col.objectlist-title{
		width:auto;
	}
	section#object-list col.objectlist-action{
		width:7.5rem;
	}
	.thin-on{
		display:block;
	}
	.thin-off{
		display:none;
	}
	section#object-list div.listActionContent{
		justify-content: flex-end;
	}
}
section#object-list td{
	vertical-align: top;
}
section#object-list > table > tbody > tr > td{
	padding:0.5rem 0.25rem;
}
section#object-list > table > tbody > tr{
	transition:all 0.25s ease-out;
	border-bottom:1px dotted rgba(255,255,255,0.25);
}
section#object-list > table > tbody > tr:last-child{
	/*border-bottom:none;*/
}
/*section#object-list > table tr:nth-child(odd) {
	background-color: rgba(255,255,255,0.15);
}
section#object-list > table tr:nth-child(even) {
	background-color: rgba(255,255,255,0.05);
}*/
section#object-list > table > tbody > tr:hover{
	background-color:var(--brand-blue-75a);
	transition:all 0.0s ease-in;
	cursor: pointer;
}
#object-list div.preview{
	width:5.5rem;
	height:5.5rem;
	display:flex;
	align-items: center;
	justify-content: center;
	background-position: center center;
	background-size:cover;
	background-repeat: no-repeat;
	box-sizing: border-box;
	border-radius: 0.25rem;
	background-color:rgba(255,255,255,1);
	box-shadow:0 0 10px rgba(0,0,0,0.75);
	margin-left:0.5rem;
	transition:all 0.25s ease-in-out;
}
section#object-list > table > tbody > tr:hover div.preview {
	transform: scale(1.25) rotate(-5deg) translateX(-5px);
	transition:all 0.15s ease-in-out;
}
section#object-list p.listThinDescription{
	margin:0.5rem 0 0.25rem;
	opacity:0.75;
}
section#object-list div.listActionContent .thin-off{
	opacity:0.75;
}
#object-list > table div.keywords{
	display:inline-flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
	margin:0.125rem 0;
}
#object-list > table > .keywords > div{
	margin:0.25rem;
}
#object-list div.listPrice{
	display:flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: flex-start;
	width:100%;
}
#object-list div.listPrice h3{
	margin:1rem 0 0.5rem;
	font-size:2rem;
	color:var(--brand-blue-100);
}
section#object-list > table > tbody > tr:hover .listPrice h3{
	color:rgba(255,255,255,1);	
}
#object-list div.listAction{
	display:flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: flex-start;
	width:100%;
}

#gallery > div{
	display:grid;
	width:100%;
	max-width:1600px;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 1rem;
	grid-row-gap: 1rem;
	opacity: 1;
	transition: all 0.75s ease-in-out 0.75s;
}
#gallery > div.loading{
	opacity: 0!important;
}
#gallery > div.imagesThree{
	max-width:1200px;
	grid-template-columns: 1fr 1fr 1fr;
}
#gallery > div.imagesTwo{
	max-width:800px;
	grid-template-columns: 1fr 1fr;
}
#gallery > div.imagesOne{
	max-width:400px;
	grid-template-columns: 1fr;
}
@media (width < 900px) {
	#gallery > div{
		grid-template-columns: 1fr 1fr 1fr;
	}
}
@media (width < 640px) {
	#gallery > div,
	#gallery > div.imagesThree {
		grid-template-columns: 1fr 1fr;
	}
	#object-list div.listPrice h3{
		font-size:1.3rem;
		line-height:1.5rem;
	}
	#object-list div.preview{
		width:4rem;
		height:4rem;
		margin:0;
	}
}
@media (width < 430px) {
	#gallery > div,
	#gallery > div.imagesTwo,
	#gallery > div.imagesThree{
		grid-template-columns: 1fr;
	}
}
#gallery > div > figure.galleryImage{
	justify-self:stretch;
	position:relative;
	display: inline-block;
	height: fit-content;
}
#gallery > div > figure > img {
	width:100%;
	border-radius:0.5rem;
	position: relative;
}
#gallery > div > figure > figcaption {
	display:inline-block;
	background-color:rgba(0,0,0,0.75);
	position: absolute;
	bottom:0.25rem;
	left:0;
	margin:0;
	padding:0.25rem;
	border-bottom-left-radius: 0.5rem;
	border-top-right-radius: 0.5rem;
	cursor:default;
}


section#related{
	background-color:var(--paper-lighter);	
}
#related div.relatedItems{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
}
#related .relatedItems div.relatedItem{
	/*border:1px solid var(--brand-blue-100);*/
	background-color:var(--paper-lighter);	
	background-color:var(--paper-darker);	
	background-color:var(--paper);	
	margin:0.5rem;
	/*padding:0.5rem;*/
	border-radius:1rem;
	display:flex;
	flex-direction: row;
	width:100%;
	max-width:300px;
	height:7.5rem;
	box-shadow: 1px 1px 1rem rgba(0,0,0,0.5);
}
#related .relatedItems .relatedItem div.thumbnail{
	margin:0 1rem 0 0;
	line-height: 0;
	flex-grow: 0;
}
#related .relatedItems .relatedItem .thumbnail div{
	width:5rem;
	height:5rem;
	display:inline-flex;
	align-items: center;
	justify-content: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	border-radius:0.5rem;
/*	border-top-left-radius: 1rem;
	border-bottom-left-radius: 1rem;*/
	transform:scale(1.2) rotate(-5deg) translateY(0.25rem);
	margin:0;
	padding:0;
	transition:all 0.125s ease-in-out;
	cursor: pointer;
	box-shadow: 1px 1px 0rem rgba(0,0,0,0);
}
#related .relatedItems .relatedItem div.copy{
	padding:0.25rem 0.25rem 0.25rem 0;
	flex-grow: 1;
	transition:all 0.125s ease-in-out;
	cursor: pointer;
}
#related .relatedItems .relatedItem div.copy p{
	margin:0;
}
#related .relatedItems .relatedItem div.copy p i{
	transform:scale(1.2);
}
#related .relatedItems .relatedItem div.copy p:first-child{
	margin-bottom:0.25rem;
}
#related .relatedItems .relatedItem div.copy p{
	line-height: 1.4;
}
#related .relatedItems .relatedItem:hover{
	background-color:var(--brand-blue-100);
	box-shadow: inset 1px 1px 1rem rgba(0,0,0,0.5);
}

#related .relatedItems .relatedItem:hover div.copy,
#related .relatedItems .relatedItem:hover div.copy .legal{
	color:rgba(255,255,255,1);
}
#related .relatedItems .relatedItem:hover div.thumbnail div{
	transform:scale(1.3) rotate(-3deg) translateY(0.25rem) translateX(-0.5rem);
	box-shadow: 1px 1px 1rem rgba(0,0,0,1);
}
#related .relatedItems .relatedItem div.action{
	padding:0rem 0.5rem;
	flex-grow: 0;
	display:flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color:var(--paper-darker);
	border-top-right-radius: 1rem;
	border-bottom-right-radius: 1rem;
}
#related .relatedItems .relatedItem .action p:last-child{
	/*border-top:1px dotted var(--brand-blue-100);*/
	color:var(--brand-blue-100);
	width:100%;
	height:100%;
	display:inline-flex;
	align-items: center;
	justify-content: center;
	border-bottom-right-radius: 1rem;
	padding:0.25rem 0;
	margin:0;
	text-align: center;
	cursor:pointer;
	transition:all 0.25s ease-in-out;
	pointer-events: auto;
}
#related .relatedItems .relatedItem .action p:last-child:hover{
	color:rgba(255,255,255,1);
}
#related .relatedItems .relatedItem .action p:last-child i{
	transition:all 0.1s ease-out;
}
#related .relatedItems .relatedItem .action p:last-child:hover i{
	transform:scale(1.1);
	transition:all 0.1s ease-out;
}








/*
related table
*/

section#related{
	padding:1rem;
}
section#related > h2{
	text-align: center;
	color:var(--brand-brown-light-100);
	margin-bottom:0;
	margin-top:1rem;
}
section#related > table{
	width:100%;
	/*max-width: var(--content-max-width);*/
	max-width: var(--content-part-max-width);
	border-collapse: collapse;
}
section#related > table h2{
	margin:0;
}
section#related col.objectlist-preview{
	width:7%;
}
section#related col.objectlist-title{
	width:66%;
}
section#related col.objectlist-action{
	width:7%;
}
section#related div.listActionContent{
	display:flex;
	flex-direction: row;
	width:100%;
	justify-content: space-between;
	align-items: center;
}
@media (width < 1000px) {
	section#related col.objectlist-preview{
		width:5rem;
	}
	section#related col.objectlist-title{
		width:auto;
	}
	section#related col.objectlist-action{
		width:7.5rem;
	}
	section#related div.listActionContent{
		justify-content: flex-end;
	}
}
section#related > table > tbody > tr{
	transition:all 0.25s ease-out;
	border-bottom:1px dotted rgba(255,255,255,0.25);
	cursor:pointer;
}
section#related > table > tbody > tr:last-child{
	border-bottom:none;
}
section#related > table > tbody > tr > td{
	vertical-align: top;
	padding:0.5rem 0.25rem;
}
section#related div.preview{
	width:5.5rem;
	height:5.5rem;
	display:flex;
	align-items: center;
	justify-content: center;
	background-position: center center;
	background-size:cover;
	background-repeat: no-repeat;
	box-sizing: border-box;
	border-radius: 0.25rem;
	background-color:rgba(255,255,255,1);
	box-shadow:0 0 10px rgba(0,0,0,0.75);
	margin-left:0.5rem;
	transition:all 0.25s ease-in-out;
}
section#related > table tr:hover div.preview{
	transform:rotate(0deg) scale(1.2) translateX(-0.25rem) !important;
}
section#related > table > tbody > tr:hover{
	background-color:var(--paper);
}
section#related > table tr:hover p.legal{
	color:rgba(255,255,255,1);
}
section#related > table tr:hover button{
	color:rgba(255,255,255,1);
	border-color:rgba(255,255,255,1);
}
section#related > table tr:hover button:hover{
	color:var(--brand-blue-100);
	border-color:var(--brand-blue-100);
}
/*#related div.listPrice{
	display:flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: flex-start;
	width:100%;
}
#related div.listPrice h3{
	margin:1rem 0 0.5rem;
	font-size:2rem;
	color:var(--brand-blue-100);
}
section#related > table > tbody > tr:hover .listPrice h3{
	color:rgba(255,255,255,1);	
}*/
#related div.listAction{
	display:flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: flex-end;
	width:100%;
	height:100%;
}
#related .legal{
	margin:0;
}
#related .legal .listPrice{
	color:var(--brand-blue-100);
	font-family: 'Schoolbell';
	font-style: normal;
	font-weight: 400;
	font-size:1.25rem;
	white-space: nowrap;
}
#related div.listAction button{
	margin-right:0;
	margin:0.5rem 0.25rem 0 0;
}
#related div.listAction button:last-child{
	/*margin-right:0.5rem;*/
}
@media screen and (width < 700px){
	#related div.listAction{
		flex-direction: column;
	}
	#related div.listAction button{
		margin:0 0 0.5rem 0.25rem;
	}
	#related div.listAction button:last-child{
		margin:0rem 0 0 0.25rem;
	}
}




/*
*/























aside{
	position:fixed;
	right:-2px;
	bottom:15%;
	box-sizing: border-box;
	z-index:3;
	box-shadow: 0 0 2rem rgba(0,0,0,1);
	border:2px solid rgba(255,255,255,0.125);
	border-top-left-radius: 1.5rem;
	border-bottom-left-radius: 1.5rem;
	background-color:var(--brand-blue-75a);
	background-color:rgba(0,0,0,0.85);
	backdrop-filter:blur(8px);
	padding:0;
	transition:all 0.25s ease-out;
}
aside.loading{
	right:-6rem;
	transition:all 0.125s ease-in;
}
/*
aside > div{
	width:3rem;
	height:3rem;
	margin:0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: 1.5rem;
	border:2px solid var(--brand-brown-100);
	color:var(--brand-brown-100);
	transition: all 0.125s ease-out;
	cursor: pointer;
}
aside > div:hover{
	border:2px solid var(--brand-blue-100);
	color:var(--brand-blue-100);
	transition: all 0.125s ease-in;
	transform: scale(1.1);
}
aside > div.help{}
aside > div.howto{}
aside > div.clipboard{}
aside > div.cta{
	background-color: var(--brand-brown-100);
	color:rgba(255,255,255,1);
}
aside > div.cta:hover{
	background-color: var(--brand-blue-100);
	color:rgba(255,255,255,1);
}
aside > div > i{}
*/
/*
footer */
footer{
	position: relative;
	background-color:var(--brand-brown-100);
	width: 100%;
    min-height: 50px;
    display: flex;
	flex-direction: column;
    text-align: center;
	align-items:center;
    box-sizing: border-box;
	box-shadow: inset 0 1rem 1rem rgba(0,0,0,0.5);
	padding:1rem 1rem 4rem;
}
footer > p{
	color:rgba(0,0,0,1);
	font-size:0.75rem;
}
footer > p strong{
	display:block;
	margin:1rem 0 0.25rem;
}
div#clipboardstate {
	position:fixed;
	width:calc(100% - 1rem);
	min-height: 5rem;
	top:-10rem;
	left:0.5rem;
	display:flex;
	align-items: center;
	justify-content: flex-start;
	background-color:var(--clipboard-bg-100);
	color:rgba(255,255,255,0.5);
	border:none;
	border-radius: 0.5rem;
	padding:0.25rem 0.25rem;
	z-index: 2;
	text-align: center;
	opacity:0;
	transition:all 0.5s;
	box-shadow: 0 0 1rem rgba(0,0,0,0.5);
	box-sizing: border-box;
}
div#clipboardstate p{
	margin:0;
	text-align: left;
}
div#clipboardstate.flash {
	opacity:1;
	top:0.25rem;
	transition:all 0.25s;
}
div#clipboardstate span.round{
	color:rgba(255,255,255,0.5);
	border-color:rgba(255,255,255,0.5);
	margin:0.25rem 0.5rem 0.25rem 0;
}