/* FONT COLORS and SIZES */
body { /* Originally I had font-size: 1.27em - or 21px */
	font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
	font-weight: 500; 
	line-height: 1.6;
	color: black; /*lightskyblue;*/
	text-rendering: optimizeLegibility;
	background-image: url('../img/ChorVorTurmCut.jpg');
}
html {
  font-size: 2.25vh;	
}
h1 {
  font-size: 2rem;
}
nav {
  font-size: 2rem;
}
body, p, table, input {
  font-size: 1rem;	
}

/* LINK DECORATION */
a, a:hover, a:focus, button {
	color: black; outline:0; /* border:none; cursor: pointer; */
}

/* GENERAL BACKGROUND */
* {
	background-color: transparent;
	box-sizing: border-box;
}
body {
	background-attachment:fixed;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center bottom;
	margin: 0;
}

/* LOGO */
img.logo {
	position: absolute;
	top: 2.5vw;
	left: 5vw;
	width: 40vw;
}
img.titel {
	position: absolute;
	left: 0; right: 0;
	margin: auto;
	bottom: 57vh;
	width: 60vw;
}

/* ICONS to SWITCH PAGES */
div.iconleft {
	left: 5vw;
}
div.iconright {
	left: 89vw;
}
div.iconright, div.iconleft {
	position: fixed;
	top: 12.5vw;
}
div.iconright img, div.iconleft img {
	width: 6vw;
}

/* BACKGROUND ELEMENT */
div.background {
	background-color: #c54954;
	background-color: rgba(238, 243, 251, 0.85);
	position: relative; margin: 10vw auto 0;
	width: 75%;
	padding: 0 8px 5px;
	text-align: justify;
}

/* NAVIGATION MENU */
nav {
	position: fixed; z-index: 99999;
	top: 1.5vw; 
	right: 12.5%;
}
li.menupic {
	text-align: right;
}
div.menuname {
	display: none;
}
.navmenu img {
	width: 7.5vw;
}
.navmenu, .navmenu ul, .navmenu li
{
  padding: 0px;
  margin: 0px;
  display: block;
}
.navmenu li
{
  list-style-type: none;
}
.navmenu ul {
	font-weight: 600;
	text-align: justify;
}
.navmenu ul li {
	line-height: 100%;
	padding: 5px;
	background-color: #615851;
	background-color: rgba(127, 118, 111, 0.8);
}
.navmenu a {
	color: lightskyblue;
	text-shadow: 2px 2px 4px #000000;
	text-decoration: none;
	display: block;
}
.navmenu a:hover, .navmenu a:focus {
	color: white;
}
.navmenu ul li:hover, .navmenu ul li:focus {
	background-color: #615851;
	background-color: rgba(127, 118, 111, 0.4);
}

.navmenu ul
{
  visibility: collapse;
  max-height: 0;
}
.navmenu li:hover > ul
{
  visibility: visible;
  max-height: 100vh;
}
.navmenu ul.parent_hover
{
  visibility: visible;
  max-height: 100vh;
}
.iconLeft img, .iconRight img {
	width: 325px;
}

/* KLEINIGKEITEN */
h1 {
	margin-bottom: 1.1vw;
}
.content p {
	margin: 0 0 0 0;
}
.hoeren p {
	margin: 0 0 25px 0;
}
.entrance {
	display: block;
   width: 100%;
   height: 100%;
   text-indent: -9999px; /* we don't need to see the text, but some users and robots such as Google do */
}

div img {
	width:100%;
}
img.Leitung {
	max-width:35vw;
	margin: 0 8px 5px 8px;
	display: inline-block;
	float: left;
}

/* INFO und KONZERT TABELLE */
table.Konzertinfos {
	border-spacing: 5px;
	font-weight: 600;
}
table.Konzertinfos td {
	padding: 0px 15px 7px;
}
table.Infos td {
	padding: 0.4em 15px;
}

/* SLIDESHOW */
div.parent {
	text-align: center;
	position: relative;
}
#slideshow {
	margin: 0 auto;
}
#slideshow > div {
	position: absolute;
	width: 100%;
}

/* PLAKAT */
#Konzertplakat {
	width: auto;
	max-height: 50vh;
	transition: max-height 0.10s ease-out;
}
#Konzertplakat:hover {
	width: auto;
	max-width: 100%;
	max-height: 100vh;
	transition: max-height 0.15s ease-in;
}


/* SUBSCRIBE NEWSLETTER */
.subscribe-form {
  position: relative;
  margin: 0;
}

.subscribe-input {
  padding: 0 3.4rem 0 0.8rem;
  width: 100%;
  height: 1.7rem;
  background: #fefefe;
  border: 1px solid;
  border-color: #999 #aaa #aaa;
  border-radius: 1rem;
}
.subscribe-input:active { outline: none; }

.subscribe-submit {
  display: block;
  position: absolute;
  top: 0px;
  right: 0px;
  padding-left: 0.8rem;
  height: 1.7rem;
  width: 3.4rem;
  border: 1px solid;
  border-color: #80aff0 #80aff0 #80aff0 #97affa;
  border-radius: 0 1rem 1rem 0;
  cursor: pointer;
  color: transparent;
  background: #87cefa url('../icon/tick.png') no-repeat center;
  background-size: 40%;
}

#Konzertplakat {
	width: auto;
	max-height: 50vh;
	transition: max-height 0.10s ease-out;
	margin-bottom: 1.5vh;
}

#Konzertplakat:hover {
	width: auto;
	max-width: 100%;
	max-height: 100vh;
	transition: max-height 0.15s ease-in;
}


@media only screen and (orientation: landscape) {
html {
  font-size: 2vmin;	
}
body {
	background-size: 100%;
}
div.background {
	width: 50%; max-width: 800px; /* min-width: 600px;*/
}
div.iconleft {
	left: 18vw;
}
div.iconright {
	left: 76vw;
}
img.logo {
	width: 20vw;
}
img.Leitung {
	max-width:15vw;
}
nav {
   font-size: 1.25rem;
	top: 2.5vw; 
	right: 3.5vw;
}
div.menuname {
   display: block;
	color: white; font-size: 1rem; margin-right: 12px; margin-bottom:-10px;
}
.navmenu img {
	width: 4.5vw;
}
.navmenu ul li {
	background-color: transparent;
}
}

@media (max-aspect-ratio: 3/2) {
body {
	background-size: cover;
}
}