

* {  /* Global Canvas */
	margin: 0;
    padding: 0;
    border: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    vertical-align: center;
}

.hflex{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding 40px 0px;
}

.vflex{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	margin auto 0;
}

.tile {
	margin: 30px 30px;
	height:500px;
	width:500px;
	background-color: grey;
	padding: 0px 0px;
	margin: 30px 10px;
	
	animation-name: tile_animation_off;
	animation-duration: 3s;
	animation-delay: 0s;animation-fill-mode: forwards;
}

.tile:hover {
	animation-name: tile_animation;
	animation-duration: 1s;
	animation-delay: 0s;
	animation-fill-mode: forwards;
}

@keyframes tile_animation{
	0% {
		opacity: 1;
		}
	100% {
		opacity: 0.5; 
		box-shadow: -10px 0px 0px 0px #221F51;
		}
}

@keyframes tile_animation_off{
	0% {
		opacity: 0.5;
		box-shadow: -10px 0px 0px 0px #221F51;
		}
	100% {opacity: 1;}
}



.crossfade > figure {
  animation: imageAnimation 130s linear infinite 0s;
  backface-visibility: hidden;
  background-size: cover;
  background-position: center center;
  color: transparent;
  height: 100%;
  left: 0px;
  opacity: 0;
  position: fixed;
  /*top: 0px;*/
  width: 100%;
  z-index: -100000;
}

.crossfade > figure:nth-child(1) { 
  
  background-image: url('../media/bgimage.jpg'); }

.crossfade > figure:nth-child(2) {
  animation-delay: 10s;
  background-image: url('../media/bg_strand_1.jpg');
}

.crossfade > figure:nth-child(3) {
  animation-delay: 20s;
  background-image: url('../media/bg_mood_olive.jpg');
}

.crossfade > figure:nth-child(4) {
  animation-delay: 30s;
  background-image: url('../media/bg_strand_3.jpg');
}

.crossfade > figure:nth-child(5) {
  animation-delay: 40s;
  background-image: url('../media/bg_strand_4.jpg');
}

.crossfade > figure:nth-child(6) {
  animation-delay: 50s;
  background-image: url('../media/bg_strand_2.jpg');
}

.crossfade > figure:nth-child(7) {
  animation-delay: 60s;
  background-image: url('../media/bg_mood_kaktus.jpg');
}

.crossfade > figure:nth-child(8) {
  animation-delay: 70s;
  background-image: url('../media/bg_mood_eiche.jpg');
}

.crossfade > figure:nth-child(9) {
  animation-delay: 80s;
  background-image: url('../media/bg_mood_kaktus2.jpg');
}

.crossfade > figure:nth-child(10) {
  animation-delay: 90s;
  background-image: url('../media/bg_mood_blumen.jpg');
}

.crossfade > figure:nth-child(11) {
  animation-delay: 100s;
  background-image: url('../media/bg_mood_lavendel.jpg');
}

.crossfade > figure:nth-child(12) {
  animation-delay: 110s;
  background-image: url('../media/bg_mood_palmen.jpg');
}

@keyframes 
imageAnimation {  
0% {
 animation-timing-function: ease-in;
 opacity: 0;
}
 8% {
 animation-timing-function: ease-out;
 opacity: 1;
}
 17% {
 opacity: 1
}
 25% {
 opacity: 0
}
 100% {
 opacity: 0
}
}


.tile img {
	height: 100%;
	width: 100%;
	margin 0 0;
}

body {
	font-size: 62.5%;
	font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #221F51;
	height: auto;
	min-height: 100vh;
	/*background-color: darkgrey;*/
	display: flex;
	flex-direction: column;
	justify-content: space-between; 
}

html{
	min-height: 100%;
}

.container{
	font-size: 1.6em;
	margin: 0 auto;
	clear: both;
	padding: 0 0;
	/*background-color:orange;*/
	max-width: 1060px;
	/*z-index: 1002;*/
	
}


.wrapper {
	margin: 0 auto;
	width: 1060px;
	background-color: white;
	font-size: 1.6em;
	padding: 0 0;
	background: rgba(255,255,255,0.90);
}

div{
/*	border:1px dotted red ; */
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { /* 26 */
	display:block;
}

header { /* die gesamte obere Box */
	position: fixed;
	top: 0px;
	width:100%;
	height: 160px;
	z-index: 501;
}

#header_meta { /* der obere Teil der oberen Box */
	border-top: none;
    z-index: 10;
    height: 30px;
    padding: 5px 0;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    /*argin-bottom: -1px;*/
    background: rgba(38,84,166,0.99);
	border-bottom: solid 1px grey;
	color: #d2c59c;
}


#header_meta .container .sub_menu { /* 1525 */
	padding-left: 10px;
	text-align: right;
    z-index: 2;
    line-height: 18px;
    width: 400px;
    
}


#phone-info{
	 line-height: 18px;
		z-index: 1003;
		height: 20px;
}

#sub_menu{
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		z-index: 1003;
		height: 20px;
}

#header_main {
	top: 30px;
	height: 131px;
	z-index: 900;
	border-bottom: solid 1px grey;
	background: rgba(68,114,196,0.95);
}

#header_main nav{
	display: inline-block;
}

#header_main li{   
	/*text-indent: -1em; */ 
	list-style:none;  
	display:inline;
	font-weight: bold;
	height: 100%;
	margin: auto 0;
	color: #d2c59c;

}


li a{
	display: inline-block;
	padding: 55px 20px;
	color: white;
}

footer li a{
	display: inline-block;
	padding: 0px 0px;
}

li a:hover   {
		/*border-bottom: 10px inset orange;*/
box-shadow: 0 4px 2px -2px white;
	}

p, h1, h2, h3 {
	margin-top: .5em;
	margin-bottom: .5em;
}

.wrapper {
	margin-top: 160px;
}

.wrapper h1{
	text-transform: uppercase;
	letter-spacing: 2px;
	font-weight: normal;
	font-size: 1.6em;
	text-align: center;
	margin-top: 75px;
	margin-bottom: 75px;
}

.wrapper h2 {
	text-transform: uppercase;
	letter-spacing: 2px;
	font-weight: normal;
	font-size: 1.4em;
	text-align: center;
	margin-top: 50px;
	margin-bottom: 50px;
}

.wrapper h3 {
	text-transform: uppercase;
	letter-spacing: 2px;
	font-weight: normal;
	font-size: 1.2em;
	text-align: center;
	margin-top: 25px;
	margin-bottom: 25px;
}

.rights h2{
	font-size: 1.4em;
}

.rights h3{
	font-size: 1.2em;
}

.rights a {
	padding 0 0;
}

#footer_expand{
	width:100%;
	margin-left: 0px;
	margin-right: 0px;
}

#banner{

	width:100%;
	margin 0 0;
	animation-name: example;
	animation-duration: 2s;
	animation-delay: 0s;
}

.flowpic{
	width:100%;
	margin 0 0;
}


@keyframes example{
	0% {opacity: 0;}
	100% {opacity: 1;}
}

#greeter  p {

	font-weight: normal;
	font-size: 1.2em;
	text-align: center;
	margin: 50px;
}

table {
	margin: 0 auto;
}



a, a:link, a:visited, a:focus, a:hover, a:active{
  color:#d2c59c; /* wirkt sich auf die Links in der oberen Box aus */
  text-decoration:none;
}



/*li:hover a::before { 
    content: "> ";
}*/


a:link    { /* Deklarationen */ }
a:visited {
	color: #d2c59c;
	text-decoration: underline;
}
a:focus   { /* Deklarationen */ }


a:hover{
	
	text-decoration:bold;
	/*color:  rgba(50,50,50,0.95);
	background-color: #d2c59c;*/
}

table#database td a{
	padding: 10px; 
	}
	
footer a, footer a:link, footer a:visited{
  color: #d2c59c;
  text-decoration:none;
}

footer a:hover, footer a:focus, footer a:active{
	
}



a:active  { /* Deklarationen */ }

footer{
	width: 100%;
    position: relative;
    bottom: 0px;
    margin top: 20px;
    z-index: 2;
    overflow: hidden;
    background: rgba(68,114,196,1);
    color: #d2c59c;
	font-weight: normal;
	font-size: 1.0em;
list-style:none;	





	
}

#footer a {
	color:#d2c59c;
}
.container ul li{
	font-weight: normal;
	list-style: none;
    text-size: 1.0em;
    text-decoration: none;
}


::selection{
	background-color: #666666;
	color:#d2c59c;;
}