@font-face {
	font-family: "Open Sans";
	src: url("../fonts/opensans/static/OpenSans/OpenSans-Regular.ttf") format("truetype");
}
@font-face {
	font-family: "Lobster Two";
	src: url("../fonts/lobstertwo/LobsterTwo-Regular.ttf") format("truetype");
}
@font-face {
	font-family: "Crimson Text";
	src: url("../fonts/crimsontext/CrimsonText-Regular.ttf") format("truetype");
}
@font-face {
	font-family: "Noto Serif";
	src: url("../fonts/noto/NotoSerif-Regular.ttf") format("truetype");
}


* {
	box-sizing: border-box;
	font-family: 'Open Sans', sans-serif;
}

h1 {

	font-size: 28pt;
	color: white;
	text-align:center;
	font-family: 'Lobster Two', cursive;
	margin-bottom: 5px;

}



h2 {
	padding: 10px 10px;
	margin: 0px;
	background-color: #394E0C;
	font-size: 30px;
	color: white;
	text-align:center;
	font-family: 'Crimson Text', serif;
	font-weight: 600;

	}
	

h3 {
	padding: 15px 0 20px 0;
	margin: 0px;
	font-size: 30px;
	color: black;
	text-align:center;
	font-family: 'Crimson Text', serif;
	font-weight: 600;
	background-image: url(../img/balk.png);
	background-repeat: repeat-x;
	background-size:70%;	
}

h4 {
	
	padding: 10px 10px;
	margin: 0px;
	font-size: 15px;
	color: black;
	text-align:center;
	font-weight: bold;
	background-image: url(../img/balk.png);
	background-repeat: repeat-x;
	background-size:50%;
	font-family: 'Noto Serif', serif;	
	
}

header {
	
	height: 350px;
	background-image: url(../img/banner.jpg); 
	background-repeat: no-repeat;
	background-size: cover;    
}


header > div {
	
	min-height: 30px;
	padding: 5px 5px;
	margin: 0px;
	background-color: #394E0C;
	background-image: url(../img/balk.png);
	background-repeat: repeat-x;
	background-position: 50% 50%;
	background-size:50%;
}

input {
		
	display: none;
	
	}
	

nav {
	
	position:fixed;
	width: 15%;
	top: 350px;
	left: 0;
	background-color: rgba(255, 255, 255, 0.3);
	transition: left 0.2s;
}

nav > ul {
	
	list-style: none;
	font-size: 16px;
	padding:0;
	margin:0;	
}

nav > ul > li {
	
	width: 100%;
	display: inline-block;
}

nav > ul > li > a {
	
	color: white;
	display: inline-block;
	width: 100%;
	padding: 10px 15px;
}

nav > ul > li > a:hover {
	
background-color: rgba(66, 18, 18, 0.8);
color: white;	
}

nav > ul > li > a:active {

	background-color: rgba(108, 28, 24, 0.8);	
}




body {
	
	background-image: url(../img/links.jpg); 	
}


#content {
	
	text-align:right;
	padding-bottom:50px;	
}


#content > div {
	
	width: 85%;
	display: inline-block;	
}

#content > div:before {
	
	content: " ";
	display: block;
	height: 10px;
	background-color: rgba(255, 255, 255, 0.3);
}

#content section {
	
	background-color: white;
}


#content > div * {
			
}

#info {
	display: table;
	width: 100%;
	font-size: 15px;
	background-color: white;
	
	}
	
#info > div > a {
	
 color: #444;
}

#info table {
	
	display: inline-block;
	margin-top: 15px;
	font-size: 15px;
	
}

#info table td {
	
	text-align: left;
	
}

#info > div {
	display: table-cell;
	width: 50%;
	height: 300px;
	text-align: center;
}


#break {
	
 min-height: 10px;
 background-color:  rgba(255, 255, 255, 0.3);
 position: relative; 
}

#anfahrt {
	
	height:650px;
	padding-top: 20px;
	text-align: center;
	
}

#anfahrt > h2 {
	
	width: 600px;
	margin-top: 10px;
	display: inline-block;
	position: absolute;
}

#map {
	
	display: inline-block;
	width:600px;
	height:400px;
	top:50px;
}

#a_beschreibung > p {
	
	    margin-top: 70px;
}


#gallerie > div > p {
	
	text-align: center;
	color: white;
	padding: 30px 0 0 0;
	margin: 0 0 0 0;
	display: inline-block;
	width: 560px;	
}

#gallerie > div > hr {
	
	max-width: 600px;
	margin: 5px auto;
}

#gallerie > a > p {
	
	text-align: center;
	padding: 5px;
	margin: 15px 0 20px 0;
	color: white;
	top: -50px;
	display: inline-block;
	border: 1px solid white;
	border-radius: 6px;		
}

#gallerie > a > p:hover {
 background-color: rgba(66, 18, 18, 0.8);
color: white;		
}



#gallerie > article {
	
	text-align: center;
	color: white;
	display: inline-block;
	width:560px;
}

section#gallerie {
	
	text-align: center;
	background-color:#394E0C;
	padding-bottom:50px;
}

#gallerie > a {
	
	display: inline-block;	
	width: 300px;
	color: white;
	font-weight: bold;
}


#gallerie > a > img {
	
	height: 300px;	
	width: 300px;
	padding: 10px 0px 5px 10px;
}

#gallerie > h2 {
	
	padding-top: 20px;	
 	background-image: url(../img/balk.png);
	background-repeat: repeat-x;
	background-position: 50% 50%;
	background-size: 60%;
	
}

hr{	

	max-width: 600px;
	margin:20px auto;	
}

/* änderung */

#gallerie > div > div > a {
	display: inline-block;
	max-height: 200px;
	max-width: 200px;
	margin: 5px;
}

#gallerie > article {
	
	padding-top: 15px
}


/* änderung ende */

#veranstaltung {
	min-height: 500px;
	text-align: center;
	padding-bottom: 30px;
	position: relative;
}


#event {
	
	max-width: 600px;
	display: inline-block;
	margin-top:10px;
}

#event > li > img {
	
	margin-top: 15px;
}


#veranstaltung > ul {
	
	 list-style: none;
	 padding: 0px;
}

#veranstaltung > h3 {
	
	padding-top: 25px;
    background-image: url(../img/balk2.png);
	background-size:80%;
	background-repeat: repeat-x;
	background-position: 50% 50%;
	
	
}



#buttons > li {
	
	display: inline-block;
	text-align: center;	
}

#veranstaltung > ul > li>  a {
	
	cursor: pointer;
	padding: 8px 18px;
	margin:10px;
	border-radius: 6px;
	background-color: #394E0C;
	color: white;
	font-weight: bold;
	position: relative;
	top: 10px;
}

#veranstaltung > ul > li>  a:hover {
	
	background-color: #421212;	
}


#Button_tdot {
	
	margin-top:20px;
}

#Button_tdot > a {
	
	border: 1px solid black;
	cursor: pointer;
	padding: 8px 18px;
	margin:10px;
	border-radius: 6px;
	background-color: white;
	color: black;
	position: relative;
}

#Button_tdot > a:hover {

	background-color: #421212;
	color: white;

}


#buttons > li.uk-active > a {

	background-color: #421212
}


footer:before {
	
	content: " ";
	display: block;
	height: 10px;
	background-color: rgba(255, 255, 255, 0.3);
	top: -10px;
	position: relative;
	
}

footer {
	min-height:200px;
	color: white;
	background-color: #421212;
	text-align: center;
	font-family: 'Open Sans', sans-serif;

}

footer > h1 {
	
	padding-bottom: 20px;
	margin-bottom: 0px;
	
}

footer > div > p, 
footer > div > a {
	
	margin: 30px;	
	display: inline-block;
	color: white;	
}

footer > div > a:hover {

color: silver;
text-decoration: none;
	
}

.uk-modal-dialog {
	border-radius: 4px;
}
.uk-modal-header {
	margin-bottom: 15px;
	margin: -20px -20px 15px -20px;
	padding: 20px;
	border-bottom: 1px solid #E5E5E5;
	border-radius: 4px 4px 0 0;
	background: #fafafa;
}

.uk-modal-footer {
    margin-top: 15px;
    margin: 15px -20px -20px -20px;
    padding: 20px;
    border-top: 1px solid #E5E5E5;
    border-radius: 0 0 4px 4px;
    background: #fafafa;
}

label {
	
	display: none;
}

@media (max-width: 1030px) {
	
	html:before {
		
		content: "small";
		position: fixed;
		top:0;
		right:0;
		background-color:red;
	}
	

	
	
	nav {
		position: fixed;
		left: -80%;
		width: 80%;
		height: 100%;
		top:0px;
		padding-top:100px;
		background-color: #171717;
		z-index: 1;

	}
	
	nav > ul {
		
		list-style: none;
		font-size: 20px;
		padding-top:40px;
		margin:0;
		
	}
	
	
	nav > ul > li > a {
	
		color: white;
		display: inline-block;
		width: 100%;
		padding: 30px 15px;
	}
	
	label {
		
		display: block;
		position:fixed;
		cursor: pointer;
		top: 8px;
		left: 18px;
		width: 100%;
		height: 43px;	
		background-image: url('../img/nav2.png');
		background-repeat: no-repeat;
		/*background-position: 0 0;
		transition: background-position 0.2s;*/
		z-index:9;
		
		
	}
	
	h1 {
		
	position: relative;	
	}
	
	
	#menustate:checked ~ label {
		
		/*background-position: 0 -41px;	*/
		
	}
	
	#menustate:checked ~ nav {
			
		left:0;
	}
	
	header,
	#content,
	footer {
		position: relative;
		left: 0;
		transition: left 0.2s;
		overflow: hidden;
		z-index: 0;
	}
	#menustate:checked ~ header, 
	#menustate:checked ~ #content, 
	#menustate:checked ~ footer {
		
	left:80%;
		
	}
	
	body {
		
		background-image: none;
		overflow-x: hidden;
	}

	
	#content > div {
	
		width: 100%;
		display: inline-block;
	}
	

	#info {
		display: table;
		width: 100%;
		font-size: 15px;
		background-color: white;
	}

	#info > div {
		display: table-cell;
		width: 100%;
		height: 300px;
		text-align: center;
		display: inline-block;
	}


	#anfahrt > h2 {
		
		width: 80%;
		display: inline-block;
		position: absolute;
	}


	#map {
		
		display: inline-block;
		width: 80%;
		top:50px;
	}
	
	#gallerie > article {
	
		text-align: center;
		color: white;
		display: inline-block;
		width:60%;
	}
	
	#veranstaltung > ul > li>  a {
	
		cursor: pointer;
		padding: 8px 60px;
		margin:10px;
		border-radius: 6px;
		background-color: #394E0C;
		color: white;
		font-weight: bold;
		position: relative;
		top: 10px;
		display: inline-block;
	}