@font-face {
  font-family: "Unica One";
  src:url("fonts/UnicaOne-Regular.woff")
      format("woff");
}
@font-face {
  font-family: "Maven Pro";
  src:url("fonts/MavenPro-Regular.woff")
      format("woff");
}
@font-face {
  font-family: "Cinzel Decorative";
  src:url("fonts/CinzelDecorative-Regular.woff")
      format("woff");
}
@font-face {
  font-family: "Play";
  src:url("fonts/Play-Regular.woff")
      format("woff");
}

@font-face {
  font-family:Monofett";
  src:url("fonts/Monofett-Regular.woff")
      format("woff");
}

body {font-family: 'Maven Pro', sans-serif;}
.hlogo img {width: 90%;}
.clogo img {width: 90%;padding-bottom: 2em;margin-left: 5%;}
.bild img {width: 100%;padding-bottom: 2em;}
.boxshadow {box-shadow: 0 0 5px black;}
.ui-content {padding-bottom: 5em;}
.ui-footer {position: fixed;bottom: 0;width: 100%;z-index: 1000000;}
.ui-header h1 {color: orange;}
.ui-header h1 span {font-size: 0.8em;text-shadow: none;}
.footer h4 {color: whitesmoke;text-shadow: none;font-family: 'Cinzel Decorative', cursive;}
p.kat {width: 40%;margin:5%; position: relative;float: left;font-size: 0.7em;box-shadow: 0 0 5px gray;border-top-left-radius: 15px;border-bottom-right-radius: 15px;overflow: hidden;}
p.kat img {width: 100%;height: 15vh;}
p.kat u {position: absolute;bottom: 0;left:0;background-color: black;color: whitesmoke;width: 100%;text-decoration: none;text-align: center;}
.page {
	background-image: url(../../img/bgstart.jpg);
}
.open i {
	display: block;
	width: 72vw;
	height: 60vh;
	background-image: url(../../img/tafel.png);
	background-size: 100% 100%;
	text-indent: none;
	color: white;
	padding-left: 18vw;
	padding-top: 20vh;
	font-size: 5vw;
	vertical-align: middle;
}
.open i span {display: block;position: absolute;}
.open i #corona #text {margin-top: 30vh;font-size: 1.5em;}
.open i #corona #text2 {margin-top: 30vh;font-size: 1.2em;text-align: center;display: none;}
.open i #corona #text2 span {font-size: 1.5em;}
#corona #text span {font-size: 0.5em;font-variant: small-caps;}
u.mono {text-decoration:none;font-size: 2em;text-shadow:0 0 2px white;position:absolute;margin-top:-0.9em;font-family: 'Monofett', cursive;left:0.5em;}
.page h3 {text-align: center;}
.ui-collapsible-heading .ui-btn {text-align: center;}
.gr {font-weight: bold;}
.ui-listview li {margin: 1em;}
.ui-header {position: fixed;width: 100%;z-index: 1000000;}
span.klein {font-size: 0.7em;}
/*------------------artikelsuche-------------------------------------*/
#filter {height: 80vh;margin-top: 10vh;z-index: 1000000;padding-top: 5vh;}
#reservieren {height: 90vh;margin-top: 5vh;z-index: 1000000;padding-top: 5vh;}
#filter br {height: 0.1em;}
#filter button {margin: 0;padding: 0;}
#artikelcontainer {text-align: center;margin-top: 4em;}
.artikel {width: 40vw;height:40vw;margin-bottom: 5em;float: left;margin-right: 5vw;position: relative;}
.artikel img {width: 40vw;height: 40vw;}
.front {position: relative;}
.artikelbeschr {position: absolute;bottom: -3em;background-color: whitesmoke;width: 100%;font-size: 0.7em;padding: 0.5em;padding-left: 1em;padding-right: 1em;color: black;}
.artikel .info {
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 50%;
	background-color: white;
	width: 0.75em;
	height:0.75em;
	font-size: 0.75em;
	z-index: 99999;
	padding: 0.75em;
	
	padding-bottom: 0.75em;
	font-weight: bold;
	box-shadow: 0 0 5px grey;
	cursor: help;
}
#verkauftt {
	position:absolute;
	background-color:rgba(255,0,0,0.5);
	color:white;
	bottom: 40%;
	transform:rotate(-30deg);
	z-index:999999; 
	padding: 1em;
	left: 5%;
	
	width: 70%;
	text-align: center;
}
#verkaufttt {
	position:absolute;
	background-color:rgba(255,0,0,0.5);
	color:white;
	transform:rotate(-30deg);
	top: 0;
	z-index:999999; 
}
.artikel div.back {position: absolute;top: 0;left: 0;width: 40vw;height: 40vw;background-color: white;z-index: 9999;display: none;overflow: auto;color: black !important;}
.artikel div.back p {padding: 0.5em;padding-top: 2em;font-size: 0.8em;color: black;text-align: left;}
.artikel div.back b.backi {color: orange;}
.center {text-align: center;}
#colli span {font-size: 1.5em;}
#colli a {color: whitesmoke;}
.reservie {position: absolute;top:-1em;right: -0.2em;width: 1em;}
.befr img {width: 1em;height: 1em;}
.befr {position: absolute;top:1em;right: 0;width: 1em;}
#anmeldung {position: absolute;display: none;width: 90vw;height: 100vh;background-color: whitesmoke;padding: 0.5em;z-index: 999999;top: 0;padding: 5vw;}
#out {width: 100%;text-align: right;height: 1em;font-size: 2em;}
#out a {margin-right: 3vw;color: red;}
.ui-content p u {position: absolute;right: 2em;}
.arteig {font-size: 0.9em;color: grey;}
.arteig span {font-size: 1em;color: black;}
.arteig span.rli {padding-left: 5%;display: block;}
b.strike {text-decoration: line-through;}
#artikel p button {width: 80%;padding: 10%;font-size: 1.5em;}
#artikel p button.go {background-color: orange;color: whitesmoke;text-shadow: 1px 1px 1px black;}
#artikel p button.verkauft {background-color: darkred;color: whitesmoke;}
#artikel p button.reserviert {background-color: darkred;color: whitesmoke;}

#ankauf, #verleih {
	background: linear-gradient(to bottom right, whitesmoke 30%, lightblue);  
}
#pfandleihe {
	background: linear-gradient(to bottom right, whitesmoke 30%, lightgrey);  
}
#open {
	background: linear-gradient(to bottom right, lightgrey, whitesmoke 30%, lightgrey);  
}
#artikel, #artikelsuche {background-color: whitesmoke;}
#bfrtxt {position: absolute;right: 0;top: 0;padding: 0.5em;background-color: orange;color: white;font-size: 0.7em;}
@media screen and (orientation: landscape) {
	p.kat img {width: 100%;height: 40vh;}
}