@charset "UTF-8";
@import url("../code/accordion.css") all; 
@import url("../code/infokalbox.css") all;
@import url("../code/button01.css") all;
@import url("../code/kalender.css") all;
@import url("../code/infkalbox.css") all;
@import url("../code/kontaktbox.css") all;
@import url("../code/bildergalerie.css") all;
@import url("../code/belegungskalender.css") all;

/* Aufbau */
hr {
	border: 2px solid #04AA6D;
	border-radius: 5px;
}

#header {
	-webkit-background: #ebf5d7 no-repeat fixed center top;
	-khtml-background: #ebf5d7 no-repeat fixed center top;
    -moz-background: #ebf5d7 no-repeat fixed center top;
    -ms-background: #ebf5d7 no-repeat fixed center top;
    -o-background: #ebf5d7 no-repeat fixed center top;    
	background: #ebf5d7 no-repeat fixed center top;
  	border-color: transparent;
	display: grid;
	align-items: center;
	text-align: center;
}
#header img { 
	height: 150px;
	display: block; 
	margin: auto;  
}

#page {
	max-width: 1024px;
	margin: 0 auto;
	color: #000;
	-webkit-background: #ebf5d7 no-repeat fixed center top;
	-khtml-background: #ebf5d7 no-repeat fixed center top;
    -moz-background: #ebf5d7 no-repeat fixed center top;
    -ms-background: #ebf5d7 no-repeat fixed center top;
    -o-background: #ebf5d7 no-repeat fixed center top;    
	background: #ebf5d7 no-repeat fixed center top;
	clip: rect(210px,auto,auto,auto);
	left: auto;
	top: auto;
	right: auto;
	bottom: auto;
} 
 
#sidebar {	
	width:auto;
	height:auto;
	margin-top: 0.55em;
	margin-left: 0.55em;
	margin-right: 0.55em;
	padding-top: 0.55em;
	background: #ebf5d7;
}
#sidebar h2 {	
    font-family: Apple Chancery, cursive;
    color: #000;
}

#footer {
	clear:both;
	height:95px;
	color: #00520B;
	-webkit-background: #ebf5d7 no-repeat fixed center top;
	-khtml-background: #ebf5d7 no-repeat fixed center top;
    -moz-background: #ebf5d7 no-repeat fixed center top;
    -ms-background: #ebf5d7 no-repeat fixed center top;
    -o-background: #ebf5d7 no-repeat fixed center top;    
	background: #ebf5d7 no-repeat fixed center top;
	text-align: center;
	page-break-before: auto;
	page-break-after: auto;
	margin: 1em;
	padding-top: 0.5em;
	font: normal 14px Georgia, "Times New Roman", Times, serif;
}

/* 
=========================
Link
=========================
*/
a {
	color: #0d9431;
}
a:hover {
	color: #00ff2a;
}

/* 
=========================
Tabelle 
=========================
*/
td, th, tr {
	font: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	color: #0d9431;
	vertical-align: middle;
}
td a {
	color: #0d9431;
	vertical-align: middle;
}
td a:hover {
	color: #00ff2a;
	vertical-align: middle;
}
/* 
=========================
Button 
=========================
*/
ul.topnav {
	-webkit-list-style-type: none;
 	-moz-list-style-type: none;
 	-o-list-style-type: none;
 	-khtml-list-style-type: none;
  	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #333;
	border-radius:8px;
}

ul.topnav li {float: left;}

ul.topnav li a {	
	display: block;
	color: white;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	border-radius:8px;
}

ul.topnav li a:hover:not(.activ) {background-color: #04AA6D;}

ul.topnav li a.activ {background-color: #04AA6D;}

/* 
=========================
Bild Effekte
=========================
*/
.bild:hover {
	-webkit-box-shadow: 0 0 9px #04AA6D;
	box-shadow: 0 0 9px #04AA6D;
	-webkit-animation: glowIt 2s infinite;
	-moz-animation: glowIt 2s infinite;
	-o-animation: glowIt 2s infinite;
	animation: glowIt 2s infinite;
}

.bild {
	-webkit-transition: all 0.7s ease; transition: all 0.7s ease;
}

.flex { 
    display: flex; 
    justify-content: center; 
    align-items: center;	
	
}
.flex img:Hover{
	-webkit-transition: all 0.7s ease; transition: all 0.7s ease;
	transform: scale(2.0, 2.0);
}	

/* 
=========================
Text in Bildschirmmitte
=========================
*/
.txtcenter {
	hyphens: auto;
	margin-bottom: 20px;
	-webkit-text-align: center;
	-khtml-text-align: center;
	-moz-text-align: center;
	-ms-text-align: center;
	-o-text-align: center;
	text-align: center;
}

/* 
=========================
Informationen
=========================
*/
.infobox {
	background: #c5e683;
	position: relative;
    max-width: 680px;
    height: auto;
    border: 2px solid #04AA6D;
    margin: 30px auto 60px auto;
    padding: 10px 10px 30px 10px;
    box-sizing: border-box;
	border-radius: 8px;	
}
.infobox .infotxt {
	display: inline-block;
	vertical-align: middle;
	color:#FFFFFF;
	text-shadow: 0 1px 0 #CCCCCC, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
	font-size: 22px;
	line-height: 44px;	
}

.infobox:after{
      position: absolute;
      width: 50px;
      height: 50px;
      border-top: 0px solid #04AA6D;
      border-right: 2px solid #04AA6D;
      border-bottom: 2px solid #04AA6D;
      border-left: 0px solid #04AA6D;
      top:100%;
      left: 10%;
      margin-left: -25px;
      content: '';
      transform: rotate(45deg);
      margin-top: -25px;
      background: #c5e683;
    }
	
/* 
=========================
Artikel 
=========================
*/
.artikel strong {
	color: rgb(21,122,29);
	font-size: 22px;
	font-family: 'Baloo', cursive, Verdana, Geneva;
}
.artikel p {
	color: rgb(21,122,29);
	font-family: 'Baloo', cursive, Verdana, Geneva;
	margin-left: 15px;
}
@media screen and (max-width: 800px) {
  ul.topnav li.right, 
  ul.topnav li {float: none;} 
  #page {margin: 0 1; max-width: 85%;}
  #header img {width: 95%; height: auto;}  
  .infobox:after{margin-left: 0px;}
}