/* FLIP 3D - flipt zur 'Rueckseite' - cooler Effekt  */

.flip3D{ width:240px; height:200px; margin:10px; float:left; 
}
.flip3D > .front{
	position:absolute;
	transform: perspective( 600px ) rotateY( 0deg );
	background:#FC0; width:240px; height:200px; border-radius: 7px;
	backface-visibility: hidden;
	transition: transform .5s linear 0s;
}
.flip3D > .back{
	position:absolute;
	transform: perspective( 600px ) rotateY( 180deg );
	background: #80BFFF; width:240px; height:200px; border-radius: 7px;
	backface-visibility: hidden;
	transition: transform .5s linear 0s;
}
.flip3D:hover > .front{
	transform: perspective( 600px ) rotateY( -180deg );
}
.flip3D:hover > .back{
	transform: perspective( 600px ) rotateY( 0deg );
}

/* EFFEKTE IN DER NAVIGATION */

/* wechsl de buidl on hover - deprecated - konnst loeschen */
.zehanaegl{
position: relative;
border:0px;
margin:0px;
z-index: 1;
	}

.zehanaegl:hover{
background-color: transparent;
z-index: 50;
	}

.zehanaegl span{ /*CSS for 2. image*/
position: absolute;
background-color: transparent;
padding: 0px;
/* left: -1000px; */
/* border: 0px dashed gray; */
visibility: hidden;
color: black;
text-decoration: none;
z-index: 100;
	}

.zehanaegl span img{ /*CSS for 2. image*/
border-width: 0;
padding: 0px;
	}

.zehanaegl:hover span{ /* CSS for enlarged image on hover */
visibility: visible;
top: 0;
right: 0px; /* position where enlarged image should offset horizontally */
	}

/* TEXT ODA OIS MOEGLICHE VON LINKS EINISCHIABN */
.schiabeini {
/*	margin:0 0 0 0px; 
margin-top:-12px;*/
	-webkit-animation-name: pushingHeadline;
	-webkit-animation-duration:4s;
	-webkit-animation-iteration-count:1;
	animation-name: pushingHeadline;
	animation-duration:4s;
	animation-iteration-count:1;
	text-align: left;
	position: relative;
}

@-webkit-keyframes pushingHeadline {
	0% {		text-indent:-12000px;	}

	100% {	text-indent:0px;	}
	
}
	

/* ZIAGT VON RECHTS EINI */
.ziageini {
/*	margin:0 0 0 0px; */
	-webkit-animation-name: pushingHeadline;
	-webkit-animation-duration:3s;
	-webkit-animation-iteration-count:1;
	animation-name: pushingHeadline;
	animation-duration:3s;
	animation-iteration-count:1;
	text-align: center;
	position: relative;
	}
@-webkit-keyframes pushingHeadline {
	0% {		text-indent:-2000px;	}

	100% {	text-indent:0px;	}
	
	}
.welcome li:hover div,
.welcome li:active div,
.welcome li:focus div {
	opacity:1;
	position:absolute; 
	left:0;	
	bottom:30px;
	height:170px; 
	width:220px;
	text-align:left;
	background: rgb(150,140,130);
	background: rgba(150,140,130,.90); 	
	color:#FFF;
	-webkit-animation-name: slide;
	-webkit-animation-duration:10s;
	-webkit-animation-iteration-count:1;
	animation-name: slide;
	animation-duration:10s;
	animation-iteration-count:1;
	}
@-webkit-keyframes slide {
	0% {		height:0px;		}

	25% {		height:170px;	}

	75% {		height:170px;	}

	100% {	height:0px;	}
	
	}
/* ziagt de broesel von rechts eini */
.ziageini {
/*	margin:0 0 0 0px; */
	-webkit-animation-name: pullingHeadline;
	-webkit-animation-duration:3s;
	-webkit-animation-iteration-count:1;
	animation-name: pullingHeadline;
	animation-duration:3s;
	animation-iteration-count:1;
	text-align: left;
	position: relative;
	}

@-webkit-keyframes pullingHeadline {
	0% {		text-indent: 000px;	}
 
	100% {	text-indent: 2000px;	}
	
	}


/* TEXT RUNTER RUTSCHEN LASSEN */
.rutschrunter { 
	position:relative; /* gaaaaanz wichtig! Sonst rutscht nix!!!  */
/* W3C  */
	animation-name:slidingHeadline;
  	animation-duration:3s;
  	animation-iteration-count:1;
  	animation-direction:normal;
	
	-webkit-animation-name:slidingHeadline;
  	-webkit-animation-duration:3s;
  	-webkit-animation-iteration-count:1;
  	-webkit-animation-direction:normal;  	
	
	-moz-animation-name:slidingHeadline;
  	-moz-animation-duration:3s;
  	-moz-animation-iteration-count:1;
  	-moz-animation-direction:normal;
  	
/* VIELLEICHT SOGAR 'MAL IM IE: */	
	-ie-animation-name:slidingHeadline;
  	-ie-animation-duration:3s;
  	-ie-animation-iteration-count:1;
  	-ie-animation-direction:normal;   	  	
	}

@-webkit-keyframes slidingHeadline{
  		from {top:-1000px;	}
   	to {top:0px;	}
	}
@-moz-keyframes slidingHeadline{
  		from {top:-1000px;	}
   	to {top:0px;	}
	}

/* MARQUEE, WIE IMMER MIT EXTRAWUERSTEN FUER SCHLECHTE BROWSER */
.marquee {
	position:absolute;
	width:434px;
	margin-left:12px;
	font-family: font-family: 'Electrolize', sans-serif;
	font-size: 12px;
	color:#0e3984;
	white-space: nowrap;
	overflow: hidden;
/* Safari and Chrome  */
	overflow-x:-webkit-marquee;
	-webkit-marquee-direction: backwards;
	-webkit-marquee-style: scroll;
	-webkit-marquee-speed: fast;
	-webkit-marquee-increment: small;
	-webkit-marquee-repetition: infinite;
/* W3C  */
	overflow-x: marquee-line;
	marquee-direction: forward;
	marquee-style: scroll;
	marquee-speed: fast;
	marquee-play-count: infinite;
	}


/* TEXT HOCHSCHIEBEN */
.schiabaufi { 
	position:relative; /* gaaaaanz wichtig! Sonst rutscht nix!!!  */
/* W3C  */
	animation-name:schiabingHeadline;
  	animation-duration:4s;
  	animation-iteration-count:1;
  	animation-direction:normal;
	
	-webkit-animation-name:schiabingHeadline;
  	-webkit-animation-duration:4s;
  	-webkit-animation-iteration-count:1;
  	-webkit-animation-direction:normal;  	
	
	-moz-animation-name:schiabingHeadline;
  	-moz-animation-duration:4s;
  	-moz-animation-iteration-count:1;
  	-moz-animation-direction:normal;
  	
/* VIELLEICHT SOGAR 'MAL IM IE: */	
	-ie-animation-name:schiabingHeadline;
  	-ie-animation-duration:4s;
  	-ie-animation-iteration-count:1;
  	-ie-animation-direction:normal;   	  	
	}

@-webkit-keyframes schiabingHeadline{
  		from {top:1000px;	}
   	to {top:0px;	}
	}
@-moz-keyframes schiabingHeadline{
  		from {top:1000px;	}
   	to {top:0px;	}
	}