/* Fonts ================================ */

@font-face
{
	font-family:	'fontawesome';
	font-style:		normal;
	font-weight:	400;
	src:			url("./font/fontawesome/fa-regular-400.woff2");
}
@font-face
{
	font-family:	'fontawesome-light';
	font-style:		normal;
	font-weight:	300;
	src:			url("./font/fontawesome/fa-light-300.woff2");
}
@font-face
{
	font-family: 	'fontawesome-thin';
	font-style:		normal;
	font-weight:	100;
	src:			url("./font/fontawesome/fa-thin-100.woff2");
}
@font-face
{
	font-family:	'fontawesome-bold';
	font-style:		normal;
	font-weight:	900;
	src:			url("./font/fontawesome/fa-solid-900.woff2");
}

@font-face
{
    font-family:	'exo';
	font-style:		normal;
	font-weight:	400;
    src:			url("./font/exo/Exo-Medium.otf") format("opentype");
}
@font-face
{
    font-family: 	'exo-light';
	font-style: 	normal;
	font-weight: 	100;
    src: 			url("./font/exo/Exo-Light.otf") format("opentype");
}
@font-face
{
    font-family:	'exo-bold';
	font-style: 	normal;
	font-weight: 	900;
    src: 			url("./font/exo/Exo-Bold.otf") format("opentype");
}

/* === screen ============================ */

@media screen and (max-width: 600px)
{
	media-player video, 
	media-player media-chapters
	{ 
    	display: 	block; 
    	width: 		100%;
	}
	media-player video
	{ 
    	border-bottom: 10px solid #111;
	}
	media-player media-chapters
	{ 
		position:	static; 
		height:		200px;
	}
}

/* === root ============================== */

*
{ 
	box-sizing: 			border-box;
	font-family: 			Avenir, Helvetica, sans-serif;
	cursor:					default;     
	outline: 				none; /* remove focus outline */
	user-select: 			none;
	-ms-user-select: 		none;
	-moz-user-select: 		none;
	-webkit-user-select: 	none;
}

body
{
	margin: 				0;
	color:					#FFF;
	background-image: 		linear-gradient(hsl(200, 100%, 40%), hsl(200, 100%, 85%));
	background-attachment:	fixed;
	overflow: 				hidden;
}

a
{
	color:	white;
}

img#wappen
{
	position: 		absolute;
	top: 			7vh;
	right: 			5vw;
	width:			200px;
	z-index: 		100;
	filter:			drop-shadow(5px 5px 5px rgba(0,0,0,0.3));
	transform: 		rotate(15deg);
}


/* === page ============================== */

page
{
	display: 	block;
	position: 	absolute;
	width: 		100%;
	height: 	100%;
	padding:	5vh 10vw 5vh 10vw;
	xtransition: all 0.5s ease 0s;
}

page-headline
{
	display: 		block;
    font-family: 	'exo';
	font-size: 		400%;
	letter-spacing: 2px;
}

page-subheadline
{
	display: 	block;
	font-size: 	160%;	
}

page-text
{
	display: 	block;	
	font-size: 	120%;	
}


/* === home page ====================== */

page.home
{
	left:	0vw;
}

page.home icon.arrow-right
{
	float: 	right;
}
page.home icon.arrow-left
{
	float: 	left;
}

page.home cover-image
{
	position: 		absolute;
	display: 		block;
	left:			10vw;
	top:			20vh;
	width:			80vw;
	height:			70vh;
	border-radius:  10px;
	overflow: 		hidden;
	background:		rgba(255,255,255,0.8);
}
page.home cover-image img
{
	width:			100%;
	height:			auto;
	object-fit:		contain;
	animation:		move 20s ease infinite;
	transition-property:	opacity;
  	transition-duration: 	0.2s;
	border-radius: 			10px;
}
@-webkit-keyframes move
{
  0%
  {
    transform-origin: bottom left;
    transform: scale(1.0);
  }
  50%
  {
    transform: scale(1.2);
  }
  100%
  {
    transform: scale(1.0);
  }
}

page.home button
{
	position: 			absolute;
	width:				450px;
	height:				140px;
	line-height:		0.5;
	color: 				#FFF;
	font-size:			60px;
	border:				0px;
	border-radius:  	10px;
	padding:			10px;
	background: 		hsl(200, 100%, 20%);
	box-shadow: 		5px 5px 5px rgba(0,0,0,0.2);
}
page.home button span
{
	display:		inline-block;
	font-size:		20px;
}

page.home button.website
{
	left: 			15vw;
	bottom: 		5vh;
}
page.home button.highlights
{
	right: 			15vw;
	bottom: 		5vh;
}

page.home button:hover
{
	background: 	hsl(200, 100%, 18%);
}
page.home button:active
{
	bottom: 		calc(5vh - 2px);
	background: 	hsl(200, 100%, 16%);
	box-shadow: 	2px 2px 5px rgba(0,0,0,0.1);
}


/* === website page ====================== */

page.website
{
	left:	calc(100vw * -1);
}

page.website iframe
{
	position: 		absolute;
	left:			10vw;
	top:			15vh;
	width:			80vw;
	height:			80vh;
	border: 		0;
}


/* === highlights list page ====================== */

page.highlights-list
{
	left:	100vw
}

page.highlights-list page-headline span
{
    font-family: 	'exo-light';
	font-size: 		40px;
}

page.highlights-list #content-box
{
	position: 		absolute;
	display: 		flex;
	align-items: 	center;
	left:			10vw;
	top:			20vh;
	width:			80vw;
	height:			75vh;
	color:			hsl(200, 100%, 20%);
	border-radius:  10px;
	background:		rgba(255,255,255,0.7);
}

page.highlights-list #content-box .col
{
	display:		inline-block;
	width:			33.3%;
	padding:		2%;
	height:			100%;
	text-align:		center;
}
page.highlights-list #content-box .col ol
{
	height:			calc(75vh - 200px);	
	overflow-y:		scroll;
}
page.highlights-list #content-box .col li
{
	padding:		10px;	
}

page.highlights-list #content-box .col icon
{
	font-size: 80px;
}
page.highlights-list #content-box .col h1
{
    font-family: 	'exo-light';
	font-size: 		40px;
	margin: 		-20px 0px 20px 0px
}
page.highlights-list #content-box .col h2
{
	font-size:		22px;
	margin:			0px 0px 5px 0px;
}

page.highlights-list #col1
{
}
page.highlights-list #col2
{
}
page.highlights-list #col3
{
}

page.highlights-list ol, ul
{
    padding: 0;
    list-style-type: none;
}
page.highlights-list li
{
	display: 		inline-block;
	width:			100%;
	border-radius:	10px;
}
page.highlights-list li:hover
{
	background:	hsla(200, 100%, 25%, 0.2);
}
page.highlights-list li:active
{
	background:	hsla(200, 100%, 25%, 0.5);
}


/* === highlights detail page ====================== */

page.highlights-detail
{
	left:	calc(100vw * 2);
}

/* pdf */

page.highlights-detail .col1.pdf
{
	position: 	relative;
	width:		70%;
	height:		calc(100% - 150px);
	float:		left;
	margin-top:	40px;
}
page.highlights-detail .col2.pdf
{
	position: 	relative;
	width:		26%;
	float:		right;
	margin-top:	120px;
}

page.highlights-detail pdf-viewer
{
	position: 	relative;
	width: 		100%;
	height:		100%;
	filter:		drop-shadow(10px 10px 5px rgba(0,0,0,0.2));
}

page.highlights-detail iframe
{
	width: 		100%;
	height:		100%;
}

/* image */

page.highlights-detail .col1.image
{
	position: 	relative;
	width:		70%;
	height:		calc(100% - 150px);
	float:		left;
	margin-top:	40px;
}
page.highlights-detail .col2.image
{
	position: 	relative;
	width:		26%;
	float:		right;
	margin-top:	120px;
}

page.highlights-detail image-viewer
{
	width: 		100%;
	height:		100%;
	filter:		drop-shadow(10px 10px 5px rgba(0,0,0,0.2));
}


/* === buttons ============================== */

button.left
{
	position: 			absolute;
	top:				calc(50vh - 40px);
	left:				0px;
	height:				80px;
	width:				80px;
	color:				#FFF;
	font-size:			40px;
	border:				0px;
	border-radius:  	0px 50% 50% 0px;
	background-color: 	rgba(255,255,255,0.2);
	box-shadow: 		none;
}
button.left:after
{
	font-family: 	'fontawesome-bold';
	content: 		"\f0a8";
	margin-top:		3px;
	display: 		block;
}
button.left:hover
{
	top:				calc(50vh - 43px);
	background-color: 	rgba(255,255,255,0.4);
	box-shadow: 		5px 5px 5px rgba(0,0,0,0.1);
}
button.left:active
{
	top:				calc(50vh - 40px);
	background-color: 	rgba(255,255,255,0.6);
	box-shadow: 		2px 2px 5px rgba(0,0,0,0.1);
}

button.right
{
	position: 			absolute;
	top:				calc(50vh - 40px);
	right:				0px;
	height:				80px;
	width:				80px;
	color:				#FFF;
	font-size:			40px;
	border:				0px;
	border-radius:  	50% 0px 0px 50%;
	background-color: 	rgba(255,255,255,0.2);
	box-shadow: 		none;
}
button.right:after
{
	font-family: 	'fontawesome-bold';
	content: 		"\f0a9";
	margin-top:		3px;
	display: 		block;
}
button.right:hover
{
	top:				calc(50vh - 43px);
	background-color: 	rgba(255,255,255,0.4);
	box-shadow: 		5px 5px 5px rgba(0,0,0,0.1);
}
button.right:active
{
	top:				calc(50vh - 40px);
	background-color: 	rgba(255,255,255,0.6);
	box-shadow: 		2px 2px 5px rgba(0,0,0,0.1);
}

pdf-viewer button.fullscreen
{
	border:				0px;
	border-radius:		4px;
	color:				#FFF;
	font-size:			22px;
	width:				32px;
	height:				32px;
	position: 			absolute;
	right:				10px;
	margin-top:			10px;
	background: 		#666;
}
pdf-viewer button.fullscreen:after
{
	font-family: 	FontAwesome;
	content: 		"\f065";
}
pdf-viewer button.smallscreen:after
{
	font-family: 	FontAwesome;
	content: 		"\f066";
}
pdf-viewer button.fullscreen:hover
{
	color:				rgba(160,160,160,1);
}
pdf-viewer button.fullscreen:active
{
	color:				rgba(16,16,16,1);
}

/* === QR codes ============================== */

qr-code
{
	position:	absolute;
	right:		20px;
	bottom:		20px;
	height:		250px;
	width:		250px;
	filter:		drop-shadow(5px 5px 5px rgba(0,0,0,0.3));
	text-align:	center;
	color:		black;
	border-radius:		50%;
	background-color: 	#FCDD09;
}

qr-code img
{
	width:			200px;
	margin-bottom:	-20px;
	margin-top:		20px;
}

qr-code span
{
	display:	inline-block;
}



/* === icons ============================== */

icon
{
	margin:				0px 20px 0px 20px;
	font-size:			100px;
}

icon.arrow-left:before
{
	font-family: 	"fontawesome-bold";
	content: 		"\f060";
}

icon.arrow-right:after
{
	font-family:	"fontawesome-bold";
	content: 		"\f061";
}

icon.video:after
{
	font-family:	"fontawesome-thin";
	content: 		"\f008";
}

icon.microphone:after
{
	font-family:	"fontawesome-thin";
	content: 		"\f8cb";
}

icon.image:after
{
	font-family:	"fontawesome-thin";
	content: 		"\f03e";
}

icon.pdf:after
{
	font-family:	"fontawesome-thin";
	content: 		"\f1c1";
}



/* === wave animation ==================== */

svg
{
	xvisibility: hidden;
	position: 	absolute;
	bottom:		0px;
	width:		100%;
	height:		100px;
	z-index: 	-1;
}

.parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}
@keyframes move-forever {
  0% {
   transform: translate3d(-90px,0,0);
  }
  100% { 
    transform: translate3d(85px,0,0);
  }
}