/* CSS Grundeinstellungen */
*, *:before, *:after {
	 -webkit-box-sizing: border-box;
	 box-sizing: border-box; }

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	src: local(''),
		url('../fonts/roboto-v29-latin-regular.woff2') format('woff2'),
		url('../fonts/roboto-v29-latin-regular.woff') format('woff');}

@font-face {
	font-family: 'Roboto Condensed';
	font-style: normal;
	font-weight: 400;
	src: local(''),
		url('../fonts/roboto-condensed-v24-latin-regular.woff2') format('woff2'),
		url('../fonts/roboto-condensed-v24-latin-regular.woff') format('woff');}

@font-face {
    font-family: 'univers39ThultraCn';
    src: url('../fonts/univers_39_thin_ultra_condensed_regular.woff2') format('woff2'),
         url('../fonts/univers_39_thin_ultra_condensed_regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;}

@font-face {
    font-family: 'anf';
    src: url('../fonts/univers_lt_49_light_ultra_condensed-webfont.woff2') format('woff2'),
         url('../fonts/univers_lt_49_light_ultra_condensed-webfont.woff') format('woff');
    font-weight: 300;
    font-style: normal;} 

html{
	font-size: 100%;
	overflow:hidden;}

.cke_editable, .cke_show_borders {
	height:100% !important;}

html,body{
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	-ms-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	background-color:#333333;}

body{
	overflow-x:hidden;
	overflow-y:auto;
	font-family:'Roboto Condensed';
	font-weight:300;
	font-weight: normal;
	font-size: 1em;
	background:black;
	color:black;}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;}

.taphover:hover, .taphover.hover {
    // css for hovering here
};

.taphover {
	-webkit-user-select: none;
	-webkit-touch-callout: none;        
}

#backplane{
	width:100%;
	height:calc(100vh - 100px);
	position:absolute;top:100px;left:0;
	overflow-x:hidden;}

#header{
 	background-image:linear-gradient(90deg, #fff 0%, #fff 25%, #CE7A00 55%);
	box-shadow:0 0px 5px 5px rgba(0,0,0,.3);
	height:100px;
	width:100%;
	z-index:13;
	position:absolute;
	top:0;left:0;
	overflow:hidden;}

#suche,
#menue{
	z-index:12;
	background:white;
	position:absolute;
	top:-2000px; right:17px;
	border-radius:0 0 0 15px;
	max-width:500px;}

#suche{
	padding:10px;
	width:auto;
	max-width:100vw;}

#hlayer1,
#hlayer2{
	height:100px;
	width:100vw;
	font-size:min(3rem,3vw);
	text-align:center;}

h1,h2,h3,h4,h5,h6,#hlayer2,.ppic span,.apic span{
	text-transform:lowercase;
	letter-spacing:2px;
	font-family:"anf", arial_mt_stdlight_cond, sans-serif;}

#hlayer2{
	line-height:100px;}

#hlayer2 span{
	text-transform:lowercase;
	font-family:Arial, sans-serif;}

#navigation{
	position:static;
	z-index:99;
	display:inline-block;
	float:right;
	padding:30px 20px 0 0;}

#menue ul{
	font-size:110%;
	margin:10px;
	list-style-type:none;}

#menue li{
 	text-align:center;}

#menue li a{
	font-family:"anf",sans-serif;
	font-size:150%;
	letter-spacing:1px;
	line-height:175%;
	color:#333;}

#resetbutton,
#suche option,
#suche select{
	cursor:pointer;
	border:1px solid #F58C0E;
	border-radius:5px;
	padding:2px 5px;
	line-height:1.2rem;
	font-size:1.2rem;
	letter-spacing:1px;
	font-family:'anf',sans-serif;
	width:100px;margin:0 5px;}

#suche .select_wrapper:after{
	content:"+";}

#suche span[class="select_wrapper"]:nth-child(10):after {
	content:" ";}

#suche .sinfo{
	display:block;
	margin:.25rem;}

#resetbutton,
.hi{background:#F58C0E;}

.wrapper{
  transform:translate(-50%, -20%);}

.wrapper .icon{
  margin:20px; }

/* nav-icon-2 */
.nav-icon-1{
  width: 35px;
  height: 35px;
  margin: 5px 10px;
  position: relative;
  cursor: pointer;
	background-image:url(../../media/Lupe.png);
	background-size:contain;
	background-repeat:no-repeat;
  display: inline-block;}

.nav-icon-2{
  width: 35px;
  height: 30px;
  margin: 10px 0px 10px 10px;
  position: relative;
  cursor: pointer;
  display: inline-block;}

.nav-icon-2 span{
  background-color:#fff;
  position: absolute;
  border-radius: 2px;
  transition: .3s cubic-bezier(.8, .5, .2, 1.4);
  width:100%;
  height: 4px;}

.nav-icon-2 span:nth-child(1){
  top:0px;
  left: 0px;}

.nav-icon-2 span:nth-child(2){
  top:13px;
  left: 0px;}

.nav-icon-2 span:nth-child(3){
  bottom:0px;
  left: 0px;}

.nav-icon-2:not(.open):hover span:nth-child(1){
  transform:  scaleY(1.2);
  left: -5px;}

.nav-icon-2:not(.open):hover span:nth-child(2){
  transform: rotate(5deg) scaleY(1.1);}

.nav-icon-2:not(.open):hover span:nth-child(3){
  transform:  scaleY(1.2);
  left: 5px;}

.nav-icon-2.open span:nth-child(1){
  transform: rotate(45deg) scaleX(0.7);
  top: 13PX;
  left: -8px;}

.nav-icon-2.open span:nth-child(2){
  transform: scale(0);
  transition-duration: 50ms}

.nav-icon-2.open span:nth-child(3){
  transform: rotate(-45deg) scaleX(0.7);
  top: 13PX;
  left: 7px;}

#hamburger{
	cursor:pointer;}

label.hamburg { 
	display: block;
	background: transparent; width: 75px; height: 50px; 
	position: relative; 
	margin-left: auto; margin-right: auto;
	border-radius: 4px; }

input#hamburg {display:none}

.line { 
	cursor:pointer;
	position: absolute; 
	left:10px;
	height: 4px; width: 55px; 
	background: #fff; border-radius: 2px;
	display: block; 
	transition: 0.5s; 
	transform-origin: center; }

.line:nth-child(1) { top: 12px; }
.line:nth-child(2) { top: 24px; }
.line:nth-child(3) { top: 36px; }

#hamburg:checked + .hamburg .line:nth-child(1){
	transform: translateY(12px) rotate(-45deg);}

#hamburg:checked + .hamburg .line:nth-child(2){
	opacity:0;}

#hamburg:checked + .hamburg .line:nth-child(3){
	transform: translateY(-12px) rotate(45deg);}

#header img{
	width:auto;
	max-width:80%;
	max-height:80%;
	margin:10px 0 0 50px;}

.flip-box-front{
	background-position:center top;
	background-size:cover;}
	
/* The flip box container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-box {
	display:block;
	width:100%;
  min-height:inherit;
	vertical-align: top;
  perspective: 800px;} /* Remove this if you don't want the 3D effect */

/* This container is needed to position the front and back side */
.flip-box-inner {
  position: relative;
	width:180px;
  height: 250px;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);}

.flippy{
  transition: all 0.5s ease-in-out;}

.setcardtext{
  transform: rotateY(0deg) scaleY(1);
  transition: transform .75s ease-in-out;}

.setcardtext.flippy{
  transform: rotateY(90deg) scaleY(.1);
  transition: all .5s ease-in-out;}

.setcardtext{
	display:none;
	overflow:auto;
	cursor:pointer;
	position:absolute;
	opacity:.75;
	float:left;
	max-height:33vw;
	min-height:25vw;
	width:25%;
	background:white;
	background-image:url(../../media/paper.png);}

#grossbild,
.fullscreen2,
.fullscreen{
	width: 100vw; 
	height: 100vh; 
	max-width: 100vw;
	max-height: calc ( 100vh - 100px );
	padding-top:20px;
	background-size:cover;
	background-position:center -100px;
	position: absolute; 
	top: 100px; 
	left: 0;  }

#grossbild{
/*	background-color:rgba(245,140,14,.4) !important;*/
	background-color:rgba(0,0,0,.9) !important;
	text-align:center;}

#gross_fs,
#gross_pt,
#gross_cl{
	cursor:pointer;
	display:inline-block;
	width:38px;height:38px;
	line-height:38px;
	margin-right:5px;
	podding:1px;
	background:#F58C0E;
	color:#000;}

#gross_bd{
	cursor:pointer;
	width:100%;height:auto;}

.bw{
	max-width:100%;height:auto !important;}

.bh{
	max-height:100%;width:auto !important;}

#gboptions{
	position:fixed;
	left:11vw;
	height:32px;
	background-color:transparent;}

#fullscreencontent2{}

#fullscreencontent{
	position:relative;
	width: max(60px, 5vw);
	z-index:10;}

#fullscreencontent:hover{
	width: max(400px, 20vw);}

#fullscreencontent2,
#fullscreencontent{
	height: calc( 100%  - 100px );
	width:100%; 
	min-height: calc ( 100% - 250px );  /* 100px wg. padding und 150px wegen header */
	padding:29px 50px 10px 0px;
	overflow:hidden;
	overflow-y:auto;}

#fullscreencontent{
	float:right;
	width:max(390px, 20vw);}

#content:hover{
	z-index:11;}

#text{
}

.playerbutton{
	position:fixed;
	top:20px;right:90px;
	opacity:1;
	margin:5px;
	border-radius:5% 5% 5% 5%;
	font-family:"anf",sans-serif;
	letter-spacing:1px;
	font-size:1.3rem;
	line-height:1.6rem;
	padding:5px 15px;
	background-color:#F58C0E;
	border-style:solid 2px white;}

.playerbutton:hover{
	color:#F58C0E;
	background-color:#111;
	box-shadow:0px 0px 30px rgba(255,255,255,.6);}

.floating_button:first.child{
	margin-top:19px;}

#kdesc,
.floating_button a,
.floating_button button{
	background-color:#F58C0E;
	padding:5px 5px;
	border-style:solid;
	font-size:1.3rem;
	line-height:1.6rem;
	float:right;
	border-radius: 5%;
	width:60px;
	height:60px;
	margin-bottom:3vh;
	clear:right;
	transition: all .25s ease-in-out;
/**/}

.floating_button_button{
		border:2px solid #fff;}

.floating_button_button:hover,
.floating_button a:hover,
.floating_button button:hover{
	transform:scale(1.3);}

.floating_button a img,
.floating_button button img{
 width:100%;height:auto;}

#kdesc{
	display:none;}

#kdesc{
	font-family:"anf",sans-serif;
	border:2px solid white;
	border-right:none;
	border-radius:5% 0 0 5%;
	margin:-2px 0 5px 0;
	position:absolute;
	width:200px;
	text-align:center;
	line-height:2.4rem;
	height:3.2rem;
	display:inline-block;}

#player{
	min-height: 100%;
	min-width: 100%;
	object-fit: contain;}

.apic,.ppic{
	cursor:pointer;
	position:relative;top;left;
	display:table-cell;
	float:left;
	max-height:33vw;
	min-height:25vw;
	width:25%;
	filter: grayscale(70%) brightness(0.9) contrast(100%) sepia(0%);
	transition: filter .5s ease-in-out;
	background-position:center top;
	background-repeat:no-repeat;
	background-color:#000;
	background-size:cover;}

.apic:hover,.ppic:hover > * {}

.apic:hover > span{	display:block;}

.ppic:hover > span {
	border:1px solid #F58C0E;
	border-width:1px 0 1px 0;}

.apic span{
	display:none;}
.ppic span{
	border:1px solid rgba(0,0,0,0);
	border-width:1px 0 1px 0;}

.apic span,
.ppic span{
	padding-left:20px;

	font-size:1.9vw;	
	width:100%;
	position: absolute;
	bottom: 20px;
	color:white;
	text-shadow:0 0 10px black;	
	text-align:center;}

.apic span.bcr{
	text-align:right;
	padding-right:10px;
	bottom: 5px;
	font-size:1em;
	border:none;}

.apic:hover,
.ppic:hover{
	filter: none;}

.apic span:hover,
.ppic span:hover{
	cursor:pointer;
	text-shadow:none;
	color:white;}

.star:after,
.star2:after{
	font-size:1px;
	content:"";}

b.star,
b.star2{
	border:none important;}

.star,
.star2{
	display:inline-block !important;
	min-width:2vw;
	line-height:100%;
  background-image: url(../../media/favicon.png);
	background-repeat:no-repeat;
  background-size: .9vw auto;
	badckground-position:20px right;
  padding-left: 20px;}

.star2{
	min-width:60px;
	line-height:100%;
  background-image: url(../../media/favicon2.png);
  background-size: 1vw auto;
	badckground-position:20px right;
  padding-left: 20px;}


#grossbild,
#content{
	display:none;
	position:relative;top:150px;
	border:2px solid #F58C0E;
	z-index:2;
	background:#fff;
	opacity:1;
	border-radius:10px;
	width:90vw;
	height:80vh;
	margin:0 auto 5vh auto;
  transition: all 0.5s ease-in-out;
	padding:0px;
	overflow:auto;}

#content #text{
  transition: all 0.5s ease-in-out;
	padding:20px;}

#table{
  transition: all 1.5s ease-in-out;
	max-width: 1200px;
	min-width: 50vw;}

#profilbild{
	max-width:100%;
	width:inherit;}

.bl{
	border-left:3px double #F58C0E;}

#table2,
#table{
	border-color:#F58C0E;
	border-spacing: 10px !important;
	border-collapse: separate !important;
	margin:1rem 0;
	border-width:2px;
	border-style:solid solid solid none ;}

table th, table td{
	min-width:100px;
	padding:5px 10px;
	margin:2px 0;
	border-color:white white #F58C0E #F58C0E;
	border-width:1px;
	border-style:solid solid solid solid ;}

table th{
	cursor:default;
	border-radius:10px;
 	background-image:linear-gradient(90deg, #fff 0%, #CE7A00 100%), linear-gradient(0deg, #fff 0%, #fff 25%, #CE7A00 100%);
	padding:10px 10px;}

tbody tr:hover td{
	cursor:default;
  transition: all .05s ease-in-out;
	background:#f9f8f0;
	border:1px solid #CE7A00;

	box-shadow:1px 1px 5px rgba(0,0,0,.6);

/* 	background-image:linear-gradient(90deg, #fff 0%, #CE7A00 55%) !important;*/}

.modal-text h2{
	font-weight:500;
	margin:2rem 0 1rem 0;
	font-size:1.2rem;}

.modal-text li b{
	display:block;
	margin:.5rem 0 .25rem 0;}

.close{
	position:fixed;
	top;right;
	cursor:pointer;
	background:#F58C0E;
	opacity:.8;
	color:#fff;
	text-align:center;
	font-size:35px;
	border-radius:0 0 0 50%;
	width:40px;
	height:40px;}

.fa{
	line-height:100%;
	width:30px;
	text-align:center;
	display:inline-block;}

table {
	border-collapse:collapse;
	border-spacing:0;}

fieldset,img { 
	border:0;}

a{
	color:#F58C0E;}
a:visited{
	color:#9D3A01;}
a:active{
	color:#670909;}

a[type="application/pdf"] { 
  background-image: url(../../media/pdf.gif);
  padding-left: 20px;}

#page{
	background:white;}

@media screen and (max-width: 1400px) {
	/* 3 Bilder pro Reihe */
	.apic,.ppic{
		min-height:33.3vw;width:33.3%;	}
	.apic b.star,.ppic b.star{
	  background-size: 1.2vw auto;}
	.apic span,.ppic span{
		padding-left:20px;
		font-size:2.6vw;	}
	.apic span.bcr{
		font-size:1em;	}

@media screen and (max-width: 1150px) {
	#content{
		padding-left:0;padding-right:0;
		width: 100vw;}

	.star2{
	  background-size: 1.2vw auto;}

	/* 2 Bilder pro Reihe */
	.apic,
	.ppic{
		min-height:50vw;width:50%;}

	.apic span,
	.ppic span{
		display:block;
		font-size:4vw;
		width:100%;
		position: absolute;
		bottom: 20px;
		padding-left:20px;
		color:white;
		text-shadow:0 0 10px black;	
		text-align:center;}

	.apic span.bcr{
		font-size:1em;	}

	.apic,
	.ppic{
		filter: none;}

	.apic span,
	.ppic span{
		cursor:pointer;
		text-shadow:none;
		color:white;}

	.apic b.star,
	.ppic b.star{
	  background-size: 1.9vw auto;}

	.apic span,
	.ppic span{
		font-size:5vw;	}	}

@media screen and (max-width: 820px) {
#fullscreencontent2,
	#fullscreencontent{
		padding:29px 20px 10px 0px;}

	#text{padding-left:0;padding-right:0;}
	#table{
		border-spacing: 3px !important;
		margin:1rem 0 .5rem 0;
		border-width:2px;}

	table th, table td{
		hyhens:auto;
		min-width:0;
		padding:2px 5px;
		margin:2px 0;}

	table th{
		border-radius:5px;
		padding:5px 5px;}

	tbody tr:hover td{
		border-left-width:2px;
		border-right-width:2px;
		padding-left:4px; padding-right:5px;}

	.floating_button{	}

	#apage{
		background-position:center top;	}

	.apic:hover > span,
	.ppic:hover > span {
		display:block;}

	.apic b.star,
	.ppic b.star{
	  background-size: 2.9vw auto;}

	/* 1 Bild pro Reihe */
	.apic,
	.ppic{
		min-height:100vw;width:100%;}

	.apic span,
	.ppic span{
		font-size:10vw;	}

	.apic span.bcr{
		font-size:1em;	}
}

@media screen and (max-width: 750px) {
	#hlayer2{	display:none;}
/*	#header{	min-height:150px;}*/

	#hlayer2{	min-height:0;line-height:1rem;font-size:max(2rem,3vw);margin-top:0 !important;width:100vw;display:block;}		}

@media screen and (max-width: 550px) {
	#hlayer2{	margin-top:0 !important;width:100vw;display:block;}	}
	#logo{margin-left:20px !important;}
	#logo{margin-top:0px;}
	#hambi{margin-top:0px;}
	#apage{
		background-position:center top !important;}
	#content{

		max-height:calc(100vh - 200px);}
	#fullscreencontent{
		overflow:hidden;
		margin-top:-40px;
		width:100vw !important;
		max-height:190px;
		min-height:100px;
		position:absolute;left:0vw !important;
		text-align:center;}

	.floating_button_button{
		margin-bottom:2px;}
	#text{
		width:calc(100% - 0px) !important;
		overflow:auto !important;;}

	.floating_button_button{
		width:10vw;
		height:10vw;

		width:min(10vw, 60px) !important;
		height:min(10vw, 60px) !important;}

	.floating_button{
		width:min(10vw, 60px) !important;
		height:min(10vw, 60px) !important;
		margin-right:2px;
		margin-bottom:2px;

		display:inline-block !important;}
	#kdesc{position:absolute;top:-500px;display:none !important;}
}

@media screen and (max-width: 480px) {
	#navigation{
		position:absolute;
		margin-right:10px;}
}

#print{
	display:none;}

@media print {
	@page { size: portrait; }

	html,body{
		overflow:visible;}

	tr{	page-break-after:after;}

  #page,#grossbild,#gboptions, #fcloser {
    display: none !important;}

	#gross_bd{
		width:auto !important;
		height:auto !important;
		max-height:10cm !important;
		max-width:10% !important;}

	#page{
		width:auto;
		height:auto;}
	
	#print{
		display:block;}

	.landscape{
		@page { size: landscape !important; }
	}

}