/* amatic-sc-regular - latin */
@font-face {
  font-family: 'Amatic SC';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/Amatic_SC/amatic-sc-v24-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/Amatic_SC/amatic-sc-v24-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/Amatic_SC/amatic-sc-v24-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/Amatic_SC/amatic-sc-v24-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/Amatic_SC/amatic-sc-v24-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/Amatic_SC/amatic-sc-v24-latin-regular.svg#AmaticSC') format('svg'); /* Legacy iOS */
}

/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans/open-sans-v34-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open-sans/open-sans-v34-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans/open-sans-v34-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans/open-sans-v34-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans/open-sans-v34-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans/open-sans-v34-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}


	body {
        width: 100vw;
        font-family: 'Open Sans', sans-serif;
        text-align: center;
		font-size: 1.2em;
		position: absolute;
		left: 0;
		top: 0;
		margin: 0;
		overflow-x: hidden;
		overflow-y: scroll;
		background-color: #fff6cc;
		/*
		background-image: url(media/hintergrund.jpg);
		background-repeat: no-repeat;
		background-size: 100% auto;
		*/
    }
	
	h1,h2,h3{
		font-family: 'Amatic SC', cursive;
		width: 100%;
		text-align: center;
		margin-bottom: 0.1em;
	}
    h1 {
		font-size: 2.3em;
		font-weight: 400;
		color: #006619;
		line-height: 1em;
		margin: 0em 0 0.7em 0;
	}
    h2 { 
		font-size: 3em; 
		font-weight: 400;
		color: #006619;
	}
	
	h4{
		font-weight: 400;
	}
	
	.vorlauf{
		font-weight: 200;
		font-size: 1.2em;
		margin-bottom: 0.8em;
	}
	
    #page{
       width: 100%;
       text-align: left;
    }
	
    #altheader{
		width: 100%;
        text-align: left;
        padding-top: 2em;
	
    }
	#header{
		background-color: #fff6cc;		
		width: 100%;
		position: fixed;
        text-align: left;
        top: 0;
		left: 0px;
		z-index: 200000;
		
		transition: transform .30s 0s ease-in-out;
}

.hgbild{
	position:fixed; 
	top: 310px;
	left: 0;
	width:100%
}
.down #header {
   transform: translate3d(0, calc(-100vw / 2.1 - 20px), 0); // um 250px nach oben verschieben
}
.up #scrollup {
   transform: translate3d(0, -86px, 0); // um 90px nach oben verschieben
}
	#logo{
		margin-left: 5%;
		background-color: #fff6cc; 
		width: 90%;
		border-bottom: thin solid #777;
		padding-top: 3em;
	}
   
    .content {
		position: absolute;
		left: 0;
		top: calc(100vw / 2.112 - 1em);
        text-align:left;
		hyphens: auto;
		margin-top: 3em;
		font-size: 0.9em;
		width: 100%;
		z-index: 200;
    }
	.page{
		position: relative;
		padding: 1em 2em 1em 1em;
		background-color: transparent; 
		
	}
    #footer {
       
    }
    #footer a {
        color: #999999;
    }
	
	#rechtespalte, #seil ,#spaltenhead{		
		display: none;
	}
	
	#laub, #krone, #seil, #termine, #header-laub{
		display: none;
	}
	
	.ev-block{
		font-family: 'Devonshire', cursive;
		font-size: 0.7em;
        text-align: center;
		width: 95%;
		text-align: left;
		border: thin solid #888;
		padding: 0.3em;
		background-color: #eee;
		margin-bottom: 2em;
	}
	
	.ev-block:nth-child(even){
		transform: rotate(1deg);
	}
	.ev-block:nth-child(odd){
		transform: rotate(-1deg);
	}
	
	
	.ev-titel{
		background-color: #008423;
		text-align: center;
		font-size: 1.2em;
		color: #fff;
		padding: 0.2em 0 0.2em 0;
		margin-bottom: 0.2em;
	}
	
	.verlauf{
		width: 100%;
		position: fixed;
		top: 310px;
		left: 0;
		height: 80px;
		z-index: 15;
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fff6cc+0,000000+100&1+0,0+100 */
		background: -moz-linear-gradient(top,  rgba(255,246,204,1) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top,  rgba(255,246,204,1) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom,  rgba(255,246,204,1) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff6cc', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */

	}
	.ev-ort, .ev-adresse, .ev-long, .ev-preis, .ev-datum{
		font-family: 'Open Sans', sans-serif;
		font-size: 0.9em;
	}
	
	.ev-datum{
		margin-bottom: 0.5em;
		padding-bottom: 0.2em;
		border: thin solid #999;
		text-align: center;
		border-radius: 0.8em;
	}
	.ev-zeit{
		margin: -0.5em 0 0.5em 0;
		padding-bottom: 0.2em;
		text-align: center;
	}
	.ev-preis{
		padding-top: 0.3em;
		border-top: thin solid #888;
	}
	
	.ev-ort{
		margin-top: 0.3em;
		padding-top: 0.3em;
		border-top: thin solid #888;
		font-weight: bold;
	}
	
	.ev-mehr{
		display: none;
	}
	.ev-opener{
		float: right;
		background-color: #eee;
		padding: 0.2em;
		margin: -4px -0.3em 0 0;
		border-right: thin solid #888;
	}
	
	.layer{
		position: fixed;
		z-index: 600000;
		height: 100vh;
		width: 100vw;
		top: 0;
		left: 0;
		background-color: rgba(255,255,255,0.7);
		display: none;
	}
	
	.modal{
		position: absolute;
		top: 2em;
		z-index: 600100;
		left: 0;
		width: 100%;		
		display: none;
		background-color: #fff;
		-webkit-box-shadow: none; 
		box-shadow: none;
		border: none;

	}
	.modalcontent{
		padding: 2em;
		position: relative;
	}
	
	.modalhead{
		width: calc(100% - 1em);
		vertical-align: middle;
		padding: 0.5em;
		text-align: center;
		background-color: #eee;
		font-size: 1.3em;
		position: relative;
		top: 0;
		left: 0;
	}
	
	.modalcloser{
		width: 1.5em;
		height: 1.5em;
		cursor: pointer;
		position: absolute;
		top:0.5em;
		right: 1em;
		background-color: rgba(255,255,255,0.7);
		border: thin solid #777;
		background-image: url(closer.png);
		background-repeat: no-repeat;
		background-position: center;
		background-size: 80%;
	}
	.modalfoot{
		width: 100%;
		background-color: #eee;
		font-size: 1.6em;
		position: absolute;
		top: 0;
		bottom: 0;
	}
	
	#news{
		z-index: 200010;
		position: absolute; 
		left: 0; 
		top: 0;
		width: 100vw;
		margin-left: 0;
		height: 48px; 
		padding: 18px 0px 18px 0px; 
		background-color: rgba(200,10,0,0.5); 
		font-size: 1em; 
		font-weight: bold; 
		color: #fff;
		border: none;
		-webkit-box-shadow: none; 
		box-shadow: none;
		border-radius: 0 0 0 0;
	}
	
	
	.formblock{
		padding: 0.5em;
		padding: 0.5em 0 0.5em 0;
		margin: 0.5em 0 0.5em 0;
		border-top: thin solid #777;
		border-bottom: thin solid #777;
	}
	
	.modalcontent{
		position: relative;
		padding: 1em 2em 1em 2em;
		text-align: left;
	}
	
	.eingabe {
		font-size: 1em;
		width: 100%;
		margin-left: 0;
		vertical-align: middle;
		display: block;
		text-align: left;
		
	}
	
	.checkflag{
		display: inline-block;
		margin-top: 0em;
		width: 1em;
		height: 1em;
		background-image: url(../css/reddot.png);
		background-size: 1em 1em;
		background-repeat: no-repeat;
		
	}
	.isok{
		background-image: url(../css/checkmark.png);
	}
	.requi{
		width: calc(100% - 2em);
		display: inline-block;
	}
	
	.checkbx{
		width: 30px;
		height: 30px;
		border: thin solid #777;
		display: inline-block;
		cursor: pointer;
		background-image: none;
		background-repeat: no-repeat;
		background-size: 100%;
	}
	
	.small{
		width: 0.8em;
		height:0.8em;		
		background-image: none;
		background-repeat: no-repeat;
		background-size: 100%;
		border: thin solid #777;
		display: inline-block;
		margin-right: 0.2em;		
	}
	
	.checkbox:hover{
		background-color: #eee;
		border-color: #000;
	
	}
	.checked{
		background-image: url(checkmark.png);
		border-color: transparent;
		margin-right: 0.2em;
	}
	
	
	.inputzeile{
		width: 90%;
		margin: 0 0 0.8em 3%;
		text-align: left;
		
	}
	.inputzeile .label{
		font-size: 0.8em;
		color: #666;
		padding: 0 0 0.2em 0;
		width: 90%;
		line-height: 1.1em;
		vertical-align: middle;
		text-align: left;
	}
	
	td {
		padding-bottom: 1em;
	}
	
	button{
		font-size: 1em;
	}
	.aufmacher{
		width: 100%;
		text-align: center;
		margin-bottom: 1.5em;
	}
	.aufmacher img{
		width: 90%;
		border: 4px solid #fff;
		-webkit-box-shadow: 0px 0px 16px 3px rgba(0,0,0,0.7); 
		box-shadow: 0px 0px 16px 3px rgba(0,0,0,0.7);
	}
	#dashboard{
		cursor: pointer;
		position: fixed;
		font-size: 14px;
		color: #fff;
		background-color: #008423;
		padding: 0.8em;
		top: 0;
		left: 0;
		z-index: 300000;
	}
	
	.passshow{
		background-image: url(augen.png);
		background-repeat: no-repeat;
		display: inline-block;
		height: 1.5em;
		width: 1.5em;
		vertical-align:bottom;
		background-size: 100%;
		cursor: pointer;
	}
@media(min-width: 950px){
	#menu{
		-webkit-box-shadow: 8px 6px 4px 4px rgba(0,0,0,0.1); 
		box-shadow: 8px 6px 4px 4px rgba(0,0,0,0.1);
	}
	#header{
		width: 60%;
		background-color: #fff6cc;
		text-align: center;
		
	}
	#logo{
		width: 17em;
		border-color: transparent;
	}
	#rechtespalte, #seil ,#spaltenhead{
		display: block;
		position: absolute;
		right: 0;
		width: 35%;
		min-width: 20em;
		text-align: center;
		top: 8vw;
		z-index: 20;
	}
	#laub, #krone, #headerlaub{
		width: 50%;
		
		right: 0;
		background-size: 100% auto;
		display: block;
	}
	#krone{
		background-image: url(../media/Krone.png);
		background-repeat: no-repeat;
		background-position: right top;
		position: fixed;
		top: 0;
		z-index: 19;
		display: block;
	}
	#seil{
		background-image: url(../media/seil.png);
		background-repeat: repeat-y;
		background-position: center top;
		top: 0;
		z-index: 20;
		display: block;
	}
	#laub{
		z-index: 100000;
		position: fixed;
		top: 0;
		right: 0;
		display: block;
	}
	#header-laub{
		z-index: 9000;
		position: absolute;
		top: 0;
		height: calc(100vw / 4.55);
		right: -8%;
		display: block;
	}
	
	#termine{
		position: relative;
		width: 90%;
		margin-left: 5%;
		display: block;
	}
	.content {
		top: 120px;
        text-align:left;
		margin-top: 1em;
		font-size: 1em;
		width: 60%;
		max-width: 57em;
		min-width: 20em;
		z-index: 200;
    }
	.page{
		position: absolute;
		left: 3em;
		top: 3em;
		padding: 3em 1em 5% 1em;
		background-color: rgba(255,245,204,0.8);
		-webkit-box-shadow: 0px 0px 19px 21px rgba(255,245,204,0.8); 
		box-shadow: 0px 0px 19px 21px rgba(255,245,204,0.8);

	}
	 h1 {
		font-size: 3em;
		font-weight: 400;
		color: #006619;
		line-height: 1em;
		margin: 0.3em 0 0.6em 0;		
	}
	.modal{

		top: 2em;
		z-index: 600100;
		left: 10%;
		width: 80%;		
		display: none;
		background-color: #fff;
		-webkit-box-shadow: 0px 0px 18px 3px rgba(0,0,0,0.54); 
		box-shadow: 0px 0px 18px 3px rgba(0,0,0,0.54);
		border: thin solid #666;
	}
	#news{ 
		left: 50%; 
		top: -5px;
		width: 50%;
		margin-left: -25%;
		height: 60px; 
		padding: 20px 20px 20px 20px; 
		background-color: rgba(200,10,0,0.5); 
		font-size: 1.4em; 
		font-weight: bold; 
		color: #fff;
		border: 4px solid #fff;
		-webkit-box-shadow: 0px 0px 16px 3px rgba(0,0,0,0.7); 
		box-shadow: 0px 0px 16px 3px rgba(0,0,0,0.7);
		border-radius: 0 0 18px 18px;
	}
	.eingabe {
		font-size: 1.2em;
		width: 65%;
		vertical-align: middle;
		display: inline-block;
		margin-left: 0;
	}
	.inputzeile .label{
		display: inline-block;
		width: 24%;
		vertical-align: middle;
		text-align: right;
	}
	
	.requi{
		width: calc(65% - 1.3em);
	}
	
	.aufmacher{
		width: 70%;
		text-align: center;
		margin-left: 15%;
	}
	.aufmacher img{
		max-width: 500%;
		
	}
	.down #header {
	   transform: translate3d(0, -200px, 0); // um 250px nach oben verschieben
	}
	#scrolltop{
		position: fixed;
		display: none;
		bottom: 50px;
		left: -8px;
		width: 48px;
		height: 40px;
		background-color: #fff;
		z-index: 110000;
		background-image: url(arrowup.png);
		background-repeat: no-repeat;
		background-position: 10px 8px;
		cursor:pointer;
		border-radius: 0px 10px 10px 0;
		-webkit-box-shadow: 0px 0px 15px #595959; /* webkit browser*/ 
		-moz-box-shadow: 0px 0px 15px #595959; /* firefox */ 
		box-shadow: 0px 0px 15px #595959;
		
	}
}