﻿
/* NEUE SACHEN */
.runter2 {
	position: relative; /* gaaaaanz wichtig! Sonst rutscht nix!!!  */ /* W3C  */;
	animation-name: slidingHeadline;
	animation-duration: 2s;
	animation-iteration-count: 1;
	animation-direction: normal;
	-webkit-animation-name: slidingHeadline;
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-direction: normal;
	-moz-animation-name: slidingHeadline;
	-moz-animation-duration: 2s;
	-moz-animation-iteration-count: 1;
	-moz-animation-direction: normal; /* VIELLEICHT SOGAR 'MAL IM IE: */;
	-ie-animation-name: slidingHeadline;
	-ie-animation-duration: 2s;
	-ie-animation-iteration-count: 1;
	-ie-animation-direction: normal;
	text-align: left;
}

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

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

/*========================== MARQUEE ===========================*/

/* MARQUEE,  alte version 
.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;
 
	overflow-x:-webkit-marquee;
	-webkit-marquee-direction: backwards;
	-webkit-marquee-style: scroll;
	-webkit-marquee-speed: fast;
	-webkit-marquee-increment: small;
	-webkit-marquee-repetition: infinite;
 
	overflow-x: marquee-line;
	marquee-direction: forward;
	marquee-style: scroll;
	marquee-speed: fast;
	marquee-play-count: infinite;
	}
*/
.marquee {
 height: 16px;	
 overflow: hidden;
 position: relative;
 background: transparent;
/* border: 1px solid orange;*/
 	margin-bottom:1px; 
 	padding-top:4px;   /* 5 */
	height:16px;
/*	max-width:1280px; width:100%; */
	font-family:  'BellGothic',  sans-serif; text-transform:uppercase;	color: #031BC0; 	font-size: 14px;	text-align: right;
}

.marquee p {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 14px;
 
 text-align: center;
 /* Starting position */
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);	
 transform:translateX(100%);
 /* Apply animation to this element */	
 -moz-animation: scroll-left 13s linear infinite;		/*24*/
 -webkit-animation: scroll-left 13s linear infinite;	/*24*/
 animation: scroll-left 13s linear infinite;			/*24*/
}
/* Move it (define the animation) */
@-moz-keyframes scroll-left {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes scroll-left {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes scroll-left {
 0%   { 
 -moz-transform: translateX(100%); /* Browser bug fix */
 -webkit-transform: translateX(100%); /* Browser bug fix */
 transform: translateX(100%); 		
 }
 100% { 
 -moz-transform: translateX(-100%); /* Browser bug fix */
 -webkit-transform: translateX(-100%); /* Browser bug fix */
 transform: translateX(-100%); 
 }
}


 

/* ============================ downarrowpoint ================================= */

.downarrowpoint {
/*	background-color:rgba(0,0,0,0.2); */
	background-color:rgba(123,123,234,0.4); /* hellblau erleuchtet */
	height:55px;
	width:55px;
	text-align:center;
	display:block;
	margin:0px auto;
	border-radius:50%;
	margin-top:25px;
}
.downarrowpoint i {
	line-height:55px;
	font-size:25px;
}
.downarrowpoint i {
	-webkit-transition-property:-webkit-transform;
	-webkit-transition-duration:1s;
	-moz-transition-property:-moz-transform;
	-moz-transition-duration:1s;
	-webkit-animation-name:pulse;
	-moz-animation-name:pulse;
	-webkit-animation-duration:1.5s;
	-moz-animation-duration:1.5s;
	-webkit-animation-iteration-count:infinite;
	-moz-animation-iteration-count:infinite;
	-webkit-animation-timing-function:linear;
	-moz-animation-timing-function:linear;
}
@-webkit-keyframes pulse {
	0 {-webkit-transform:scale(1);transform:scale(1);}
	50% {-webkit-transform:scale(1.2); transform:scale(1.2);}
	100% {-webkit-transform:scale(1); transform:scale(1);}
}
@-moz-keyframes pulse {
	0 {-moz-transform:scale(1);	transform:scale(1);}
	50% {-moz-transform:scale(1.2); transform:scale(1.2);}
	100% {-moz-transform:scale(1); transform:scale(1);}
}


/* ============================ slideInDown ================================= */
@-webkit-keyframes slideInDown {
    0% { opacity: 0; -webkit-transform: translateY(-2000px);}
    100% {-webkit-transform: translateY(0);}
}
@-moz-keyframes slideInDown {
    0% { opacity: 0; -moz-transform: translateY(-2000px);}
    100% {-moz-transform: translateY(0);}
}
@-o-keyframes slideInDown {
    0% { opacity: 0; -o-transform: translateY(-2000px);}
    100% {-o-transform: translateY(0);}
}
@keyframes slideInDown {
    0% { opacity: 0; transform: translateY(-2000px);}
    100% { transform: translateY(0);}
}

.slideInDown {
    -webkit-animation-name: slideInDown;
    -moz-animation-name: slideInDown;
    -o-animation-name: slideInDown;
    animation-name: slideInDown;
}
}
 
 
/* ============================ ZOOMIN LEFT ================================= */
@-webkit-keyframes zoomInLeft {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
  
.zoomInLeft {
    -webkit-animation-name: zoomInLeft;
    -moz-animation-name: zoomInLeft;
    -o-animation-name: zoomInLeft;
    animation-name: zoomInLeft;
}
}

@moz-keyframes zoomInLeft {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
  
.zoomInLeft {
    -webkit-animation-name: zoomInLeft;
    -moz-animation-name: zoomInLeft;
    -o-animation-name: zoomInLeft;
    animation-name: zoomInLeft;
}
}

@keyframes zoomInLeft {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
  
.zoomInLeft {
    -webkit-animation-name: zoomInLeft;
    -moz-animation-name: zoomInLeft;
    -o-animation-name: zoomInLeft;
    animation-name: zoomInLeft;
}
}

/* ============================ ZOOMIN RIGHT ================================= */
@-webkit-keyframes zoomInRight {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}
 
@keyframes zoomInRight {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    -ms-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    -ms-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
} 

.zoomInRight {
  -webkit-animation-name: zoomInRight;
  animation-name: zoomInRight;
}
/* ======================================================================================= */


@keyframes zoomInUp {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    -ms-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -ms-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}


/* ========================================== ROTATE IN UP LEFT ================================ */
@-webkit-keyframes rotateInUpLeft {
    0% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(90deg);
        opacity: 0;
    }

    100% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(0);
        opacity: 1;
    }
}

@-moz-keyframes rotateInUpLeft {
    0% {
        -moz-transform-origin: left bottom;
        -moz-transform: rotate(90deg);
        opacity: 0;
    }

    100% {
        -moz-transform-origin: left bottom;
        -moz-transform: rotate(0);
        opacity: 1;
    }
}

@-o-keyframes rotateInUpLeft {
    0% {
        -o-transform-origin: left bottom;
        -o-transform: rotate(90deg);
        opacity: 0;
    }

    100% {
        -o-transform-origin: left bottom;
        -o-transform: rotate(0);
        opacity: 1;
    }
}

@keyframes rotateInUpLeft {
    0% {
        transform-origin: left bottom;
        transform: rotate(90deg);
        opacity: 0;
    }

    100% {
        transform-origin: left bottom;
        transform: rotate(0);
        opacity: 1;
    }
}

.animated.rotateInUpLeft {
    -webkit-animation-name: rotateInUpLeft;
    -moz-animation-name: rotateInUpLeft;
    -o-animation-name: rotateInUpLeft;
    animation-name: rotateInUpLeft;
}



/* =========================== FlipInY ======================= */

@-webkit-keyframes flipInY {
    0% {
        -webkit-transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotateY(-10deg);
    }

    70% {
        -webkit-transform: perspective(400px) rotateY(10deg);
    }

    100% {
        -webkit-transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
}

@-moz-keyframes flipInY {
    0% {
        -moz-transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }

    40% {
        -moz-transform: perspective(400px) rotateY(-10deg);
    }

    70% {
        -moz-transform: perspective(400px) rotateY(10deg);
    }

    100% {
        -moz-transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
}

@-o-keyframes flipInY {
    0% {
        -o-transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }

    40% {
        -o-transform: perspective(400px) rotateY(-10deg);
    }

    70% {
        -o-transform: perspective(400px) rotateY(10deg);
    }

    100% {
        -o-transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
}

@keyframes flipInY {
    0% {
        transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }

    40% {
        transform: perspective(400px) rotateY(-10deg);
    }

    70% {
        transform: perspective(400px) rotateY(10deg);
    }

    100% {
        transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
}

.animated.flipInY {
    -webkit-backface-visibility: visible !important;
    -webkit-animation-name: flipInY;
    -moz-backface-visibility: visible !important;
    -moz-animation-name: flipInY;
    -o-backface-visibility: visible !important;
    -o-animation-name: flipInY;
    backface-visibility: visible !important;
    animation-name: flipInY;
}




.bravissimo {
	margin-top:-8px;
}
.bravissimo:hover {
	transform:translatey(0px) translatex(54px) scale(1.4) rotate(360deg); 
	-webkit-transform:translatey(0px) translatex(54px) scale(1.4) rotate(360deg); 
	transition-duration:0.5s;
	-webkit-transition-duration:0.5s;
	transition-timing-function:ease-in;
	-webkit-transition-timing-function:ease-in;
	z-index:100;
}

.zoomout {
	margin-top:0px;
}
.zoomout:hover {
	transform:translatey(0px) translatex(80px) scale(1.5); 
	-webkit-transform:translatey(0px) translatex(80px) scale(1.5); 
	transition-duration:0.5s;
	-webkit-transition-duration:0.5s;
	transition-timing-function:ease-in;
	-webkit-transition-timing-function:ease-in;
	z-index:100;
}
.zoomout_l {
	margin-top:0px;
}
.zoomout_l:hover {
	transform:translatey(0px) translatex(-80px) scale(1.5); 
	-webkit-transform:translatey(0px) translatex(-80px) scale(1.5); 
	transition-duration:0.5s;
	-webkit-transition-duration:0.5s;
	transition-timing-function:ease-in;
	-webkit-transition-timing-function:ease-in;
	z-index:100;
}
.zoomout_r {
	margin-top:0px;
}
.zoomout_r:hover {
	transform:translatey(0px) translatex(80px) scale(1.5); 
	-webkit-transform:translatey(0px) translatex(-80px) scale(1.5); 
	transition-duration:0.5s;
	-webkit-transition-duration:0.5s;
	transition-timing-function:ease-in;
	-webkit-transition-timing-function:ease-in;
	z-index:100;
}

.machsgross {
	margin-top:0px;
}
.machsgross:hover {
	transform:translatey(0px) translatex(0px) scale(1.5); 
	-webkit-transform:translatey(0px) translatex(0px) scale(1.5); 
	transition-duration:0.5s;
	-webkit-transition-duration:0.5s;
	transition-timing-function:ease-in-out;
	-webkit-transition-timing-function:ease-in;
	z-index:100;
}

.zoomout_l {
	margin-top:0px;
}
.zoomout_l:hover {
	transform:translatey(0px) translatex(-72px) scale(1.5); 
	-webkit-transform:translatey(0px) translatex(-72px) scale(1.5); 
	transition-duration:0.5s;
	-webkit-transition-duration:0.5s;
	transition-timing-function:ease-in;
	-webkit-transition-timing-function:ease-in;
	z-index:100;
}

/* 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. KOANE ZEHANAEGL MEHR! */
.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;
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; */
	-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: center;
	position: relative;
	}
@-webkit-keyframes pushingHeadline {
	0% { text-indent:-12000px;	}

	100% {	text-indent:0px;	}
}
.schiablinkseini {
	-webkit-animation-name: pushingHeadline;
	-webkit-animation-duration:4s;
	-webkit-animation-iteration-count:;
	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 - geht z zt nimma */
.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: right;
	position: relative;
	}
@-webkit-keyframes pushingHeadline {
	0% {		text-indent:-2000px;	}

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

@-webkit-keyframes slide {
	0% {		height:0px;		}

	25% {		height:170px;	}

	75% {		height:170px;	}

	100% {	height:0px;	}
	
	}





/* 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  */	
	-webkit-animation-name:schiabingHeadline;
  	-webkit-animation-duration:4s;
  	-webkit-animation-iteration-count:1;
  	-webkit-animation-direction:normal;  	
/* moz  */	
	-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;   	  	
}
		
.schiabschnellaufi, .aufi2 { 
	position:relative; /* ganz wichtig! Sonst rutscht nix!!!  */
/* W3C  */
	animation-name:schiabingHeadline;
  	animation-duration:2s;
  	animation-iteration-count:1;
  	animation-direction:normal;
/* webkit  */		
	-webkit-animation-name:schiabingHeadline;
  	-webkit-animation-duration:2s;
  	-webkit-animation-iteration-count:1;
  	-webkit-animation-direction:normal;  	
/* moz  */		
	-moz-animation-name:schiabingHeadline;
  	-moz-animation-duration:2s;
  	-moz-animation-iteration-count:1;
  	-moz-animation-direction:normal;
/* IE?  */		
	-ie-animation-name:schiabingHeadline;
  	-ie-animation-duration:2s;
  	-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;}
}

