body, html {
    height: 100%;
	padding:0px;
	margin:0px;
	font-family: 'Muli', sans-serif;
	color: #FFF;
}


@font-face {
font-family: 'Prager Headlines Normal';
font-style: normal;
font-weight: normal;
src: local('Prager Headlines Normal'), url('Prager Headlines.woff') format('woff');
}

/**altes rot: rgb(175,49,45);**/

.parallax {
    /* The image used */
    background-image: url('fotos/muenchner-fruehling-11.jpg');
  
    /* Full height */
    height: 100%; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;

    background-position: center;
    background-repeat: no-repeat;

   -o-background-size: cover;
   -moz-background-size: cover;
   -webkit-background-size: cover;

}
@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {

.parallax {
    background-attachment: scroll;
}

}
.foto1{
	background-image: url('fotos/muenchner-fruehling-02.jpg');
}
.foto2{
	background-image: url('fotos/muenchner-fruehling-03.jpg');
}
.foto3{
	background-image: url('fotos/muenchner-fruehling-08.jpg');
	    background-position: 15%;

}
.foto4{
	background-image: url('fotos/muenchner-fruehling-04.jpg');
}
.foto5{
	background-image: url('fotos/muenchner-fruehling-05.jpg');
}
.foto6{
	background-image: url('fotos/muenchner-fruehling-13.jpg');
}
.foto7{
	background-image: url('fotos/muenchner-fruehling-14.jpg');
}

.foto8{
	background-image: url('fotos/81118-graf-klemperer-01.jpg');
}
.foto9{
	background-image: url('fotos/81118-graf-klemperer-02.jpg');
}
.foto10{
	background-image: url('fotos/81118-graf-klemperer-03.jpg');
}


.zitat{
	text-align:center;
	margin:auto;
	padding:30px;
	max-width:740px;
	background-color:white;
	font-size:2em;
	line-height:1.2em;
    font-family: 'Alice', serif;
}

.box{
	background-color: rgb(123,113,103);
	background-color: #111;

	font-size:1.3em;
	line-height:1.4em;	
}
.boxmitte{
	max-width:780px;
	width:90%;
	margin:auto;
	padding:10px;
}

.halbehalbe{
	clear:both;
}
.halbehalbe img{
	height:30vh;
	width:auto;
	margin:auto;
	margin-bottom:20px;
}
.links{
	float:none;
}
.rechts{
	float:none;
}
.titel {
  position: relative;
  top: 44%;
  text-align: center;
  margin:auto;
  font-size:3em;
  font-family:'Prager Headlines Normal';
}
.rot{
  background-color: #a5494c;
  color: #fff;
  padding:0em 1em 0em 1em;
}
.rotrot{
	background-color: #a5494c;
	color: #fff;
}

.herzfeld{
  top: 3%;
  font-size:3em;
}
.poster{
  position: relative;
  top: 0%;	
}

span{
    font-size:0.7em;
	line-height:1em;	
	float:right;
	margin-top:1em;
}
.r{
    font-size:0.8em;
	line-height:1em;	
	float:left;
	margin:0em;
}
.ue{
	margin-top:1em;
	margin-bottom:0.3em;
}
a{
	color: #a5494c;
	  cursor: pointer;
}
a:hover{
	background-color: #a5494c;
	color: #fff;
}

a img{
	width:100%;
}
b{
	font-weight:900;
}
h1{
	font-size: 2em;
	line-height:1em;
	font-family:'Prager Headlines Normal';
}

td{
	text-align:left;
	padding-right:1em;
	padding-bottom:1em;
	vertical-align:top;
	word-wrap: break-word;
}

.button {
  display: inline-flex;
  height: 60px;
  width: 300px;
  border: 2px solid #FFF;
  margin: 20px 20px 20px 20px;
  color: #FFF;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 1em;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#arrow-hover {
  width: 15px;
  height: 10px;
  position: absolute;
  transform: translateX(60px);
  opacity: 0;
  -webkit-transition: all .25s cubic-bezier(.14, .59, 1, 1.01);
  transition: all .15s cubic-bezier(.14, .59, 1, 1.01);
  margin: 0;
  padding: 0 5px;
}

a#button-1:hover img {
  width: 15px;
  opacity: 1;
  transform: translateX(50px);
}


#button-3 {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

#button-3 a {
  position: relative;
  transition: all .45s ease-Out;
}

#circle {
  width: 0%;
  height: 0%;
  opacity: 0;
  line-height: 40px;
  border-radius: 50%;
  background: #BFC0C0;
  position: absolute;
  transition: all .5s ease-Out;
  top: 20px;
  left: 70px;
}

#button-3:hover #circle {
  width: 200%;
  height: 500%;
  opacity: 1;
  top: -70px;
  left: -70px;
}

#button-3:hover a {
  color: #2D3142;
}

.lightbox-img{
	width:100%;
	margin-right:0em;
	margin-bottom:1em;
}


.no_input, .no_input:focus{
background-color:transparent;
border: none;
}
.input_rot{
    outline: none;
    border-color: #a5494c;
}
.error{
color: #a5494c;
font-size: 0.7em;
font-weight: bold;
}

input[type=text],textarea {
	border: solid 2px #c9c9c9;
	transition: border 0.3s;
	color: #a5494c;
	font-family: 'Muli', sans-serif;
	font-weight: bold;
	width: 90%;
	padding:10px;
	font-size:1em;
}
input[type=text]{
	height:1.2em;
	padding:10px;
}
input[type=text]:focus,textarea:focus{
  border: solid 2px #a5494c;
}

input[type=submit] {
padding:15px 30px; 
font-family: 'Muli', sans-serif;
font-weight: bold;
background-color:white;
font-size:1em;
color:  #a5494c;
border: solid 2px #a5494c;
cursor:pointer;
}
input[type=submit]:hover {
background-color: #a5494c;
color:#fff;
}

.responsiveContainer {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

.responsiveContainer iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width:800px;
  max-height:445px;
}
.responsiveContainer p {
  text-align:left;
}


/** CSS ONLY NAV **/

.header {
	position:fixed;
	top:0;
	right:0;
	z-index:100; 
}

.header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
	background: #a5494c;  

}

.header li a {
  display: block;
  padding: 12px;

  background-color:#a5494c;
  color:#fff;
  text-decoration:none;
  font-weight:900;
  font-size:1em;
	letter-spacing:0.1em;
}

.header li a:hover {
	color:#111; 
	background-color: #fff;	
}

.nix_hover:hover{
	background-color: transparent;	
}

.header .menu {
  clear: both;
  max-height: 0;
  opacity:0;
  transition: all .2s ease-out;
}

.header .menu-icon {
	background: #a5494c;
	cursor: pointer;
	display: inline-block;
	float: right;
	padding: 17px 15px 25px 15px;
	position: relative;
	user-select: none;
}

.header .menu-icon .navicon {
  background: #fff;
  display: block;
  height: 2px;
  position: relative;
  width: 25px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
  background: #fff;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.header .menu-icon .navicon:before {
  top: 7px;
}

.header .menu-icon .navicon:after {
  top: -7px;
}
.header .menu-btn {
  display: none;
}

.header .menu-btn:checked ~ .menu {
  max-height: 100%;
  opacity:1;
}

.header .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}

.header .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}

.header .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}

#logo{
	display:none;
	padding:12px;

}
#logo td {
  text-align: center;
  padding:3px;
}

@media (min-width: 600px) {
.lightbox-img{
	width:auto;
	margin-right:0.5em;
	margin-bottom:0.5em;
}
.halbehalbe{
	width:46%;
	float:left;
	clear:none;
	padding:2%;
}
.halbehalbe img{
	margin-bottom:22%;
	height:50vh;
}
.links{
	float:left;
}
.rechts{
	float:right;
}
.titel {
  top: 60%;
  font-size: 3.5em;
  letter-spacing: 0.2em;
}
.herzfeld{
  top: 10%;
}
}


@media (min-width: 1100px) {
.box{
	padding:30px;
	font-size:1.2em;	
}
.titel {
  top: 66%;
  font-size: 4em;
  letter-spacing: 0.2em;
}
.rot{
  padding:0em 3em 0em 3em;
}

.herzfeld{
  top: 10%;
}

.poster{
  top: 20%;	
}
.zitat{
	padding:30px;
	font-size:3em;
	line-height:1.1em;
}



input[type=text]{
	width: 50%;
}




/** CSS ONLY DESKTOP NAV **/

  .header .menu {
    max-height: none;
  opacity:1;
  }
  .header .menu-icon {
    display: none;
  }
  
  .header ul{
	  background-color:transparent;
	  padding-top:24px;
  }
 .header li a {

  background-color:#fff;
  color:#111;
  margin-bottom:1em;

  }
  
 .header li{

  background-color:#fff;
  color:#111;
  font-size:0.8em;
  }
  
  .header li a:hover {

	color:#fff; 
	background-color: #a5494c;	
  } 
  
  #logo{
	display:block;
	color:#fff; 
	background-color: #a5494c;
	font-size: 1.5em;
	line-height:1em;
	font-family:'Prager Headlines Normal';

	}
	.logo_animiert{
		opacity:0;	
	}	
	.td_space{
	 white-space:nowrap;
	}

}