@charset "ISO-8859-1";
/* CSS Document */


/* ################################### ANIMATION-DEFAULT  ###################################*/
/* ##########################################################################################*/
.bkheader_animation_nojs{
	position:relative;
	height:154px;    
}

/*  Background - austauschbar uber Klasse*/
#bkheader_animation_background_image{
	width:1500px;
	height:154px;
	position:absolute;
	background-position: center;
	background-repeat: no-repeat;
	background-size:auto 100%;
	opacity:1;
}
/*  all items */

.bkpage.js .bkheader_animation_items{
	width: 100%;
	height: 100%;
	position: absolute;
	overflow:hidden;
}
/*  single item */
.bkheader_animation_item{
	width: 130px;
	height: 80px;
	position:absolute;
	background-position: center center;
	background-repeat: no-repeat;
	background-size:100%;
	text-align:center;
    margin-top: 0;
    z-index: 1;
}
a.bkheader_animation_item{
	cursor:pointer;   
}
/*  single animated item */
.bkheader_animated_item{
	position:absolute;
	background-repeat:no-repeat;
	background-position:top center;
	background-size:100%;
}
a.bkheader_animated_item{
	cursor:pointer;   
}
.bkanimated_item_link{
	padding:10px;
	position:relative;
	display:block;
	top:175px;
	white-space: normal;
	text-align: center;
	-webkit-user-select:none;
	-moz-user-select:none;
	user-select:none;
	text-decoration: none;
	cursor:pointer;   
}
.bkanimated_item_link_title{
	color: black;
	font-size: 0.75em;
	line-height: 14px;
	font-weight: bold;
	letter-spacing: -0.02em;
}
.bkanimated_item_link_copy{
	margin-top: 4px;
	color: black;
	font-size: 0.7em;
	line-height: 14px;
	display: block;
}




/* ############################## VISIBILTIY ANIMATED ITEMS  ################################*/
/* ##########################################################################################*/
.bkpage.js #bkheader_animation_items .bkheader_animation_items,
.bkpage.js #bkheader_animation_items .bkheader_animated_item{
	visibility:hidden;
}
.bkpage.js #bkheader_animation_items.js .bkheader_animation_items,
.bkpage.js #bkheader_animation_items.js .bkheader_animated_item{
	visibility:visible;
}
.bkpage.js #bkheader_animation_items .bkheader_animated_item{
	opacity:0;
}
.bkpage.js #bkheader_animation_items.js .bkheader_animated_item{
	opacity:1;
	-webkit-transition:opacity  1s linear  0s;
	-moz-transition:opacity  1s linear  0s;
	transition:opacity  1s linear  0s;
}
#bkheader_animation_items #bkheader_animation_item_left {
	width:105px;
	height:160px;
	top:8px;
	overflow:hidden;
    -webkit-transition: top 1s, height 1s;
    transition: top 1s, height 1s;
}
#bkpage_start.js #bkheader_animation_items #bkheader_animation_item_left {
    height: 40px;
    top: 158px;
    -webkit-transition: top 2s, height 2s;
    transition: top 2s, height 2s;
}
#bkpage_start #bkheader_animation_items.js #bkheader_animation_item_left {
	height:160px;
	top:8px;
    -webkit-transition: top 1s, height 1s;
    transition: top 1s, height 1s;
}
#bkpage_start.js #bkheader_animation_items #bkheader_animation_item_right{
    height: 0px;
}
#bkpage_start.js #bkheader_animation_items.js #bkheader_animation_item_right {
	height: 193px;
}
#bkpage_start.js .bkpage_header.bkactive:not(.pull_up):not(.pull_down) #bkheader_animation_items.js #bkheader_animation_item_right {
    -webkit-transition: height 2s;
    transition: height 2s;
}





/* ################################ SETTING ANIMATED ITEMS  #################################*/
/* ##########################################################################################*/
#bkheader_animation_items #bkheader_animation_item_left:hover,
#bkpage_start #bkheader_animation_items #bkheader_animation_item_left:hover{
    top: -150px;
    height: 333pX;
	-webkit-transition: top 2s, height 2s;
    transition: top 2s, height 2s;
}


/*  settings animated items right */
#bkheader_animation_items #bkheader_animation_item_right{
	height: 193px;
    width: 115px;
    z-index: 15;
    background-position: bottom center;
}
body#bkpage_start.js #bkheader_animation_items #bkheader_animation_item_right,
.bkpage.js #bkheader_animation_items.js #bkheader_animation_item_right{
    top: -6px;
}





/* ############################ ANIMATION-BACKGROUND IMAGES  ################################*/
/* ##########################################################################################*/
.bkheader_animation_background_hamburg{
	background-image: url(/global/img/bkheader-animation-background-hamburg.png);
}



/* #################################### ITEMS NO-LINK  ######################################*/
#bkheader_animation_item_a{
	background-image: url(/global/img/bkheader-animation-item-c.png);
}
#bkheader_animation_item_b{
	background-image: url(/global/img/bkheader-animation-item-f.png);
}
#bkheader_animation_item_c{
	background-image: url(/global/img/bkheader-animation-item-d.png);
}



/* ###################################### ITEMS LINK  ########################################*/
#bkheader_animation_item_nav_a{	
	background-image: url(/global/img/bkheader-animation-item-e.png);
}
#bkheader_animation_item_nav_aa{	
	background-image: url(/global/img/bkheader-animation-item-f.png);
}
#bkheader_animation_item_nav_b{	
	background-image: url(/global/img/bkheader-animation-item-suchkurs.png);
	z-index:3;
}
#bkheader_animation_item_nav_bb{	
	background-image: url(/global/img/bkheader-animation-item-g.png);
	z-index:0;
}
#bkheader_animation_item_nav_c{
	background-image: url(/global/img/bkheader-animation-item-impressum.png);
	z-index:0;
}
#bkheader_animation_item_nav_cc{	
	background-image: url(/global/img/bkheader-animation-item-impressum2.png);
}
#bkheader_animation_item_nav_d{	
	background-image: url(/global/img/bkheader-animation-item-mehr.png);
	z-index:3;
}
#bkheader_animation_item_nav_dd{
	background-image: url(/global/img/bkheader-animation-item-info.png);
}

#bkheader_animation_item_nav_e{
	background-image: url(/global/img/bkheader-animation-item-juschu.png);
}





/* ################################# ITEMS ANIMATED LEFT  ###################################*/
/* ##########################################################################################*/
#bkheader_animation_item_left{
	background-image: url(/global/img/bkheader-animation-item-seitenstark.png);
}
#bkheader_animation_item_left:hover{	
	background-image: url(/global/img/bkheader-animation-item-seitenstark_hover.png);
}



/* ################################# ITEMS ANIMATED RIGHT ###################################*/
/* ##########################################################################################*/
#bkheader_animation_item_right{
	background-image: url(/global/img/bkheader-animation-item-right.png);
}




/* ################################### ANIMATIONSKLASSEN  ###################################*/
/* ##########################################################################################*/
.bkbounce { 
    -webkit-animation-fill-mode: both; 
    -moz-animation-fill-mode: both; 
    -o-animation-fill-mode: both; 
    -ms-animation-fill-mode: both; 
    animation-fill-mode: both; 
	
    -webkit-animation-timing-function: ease-in-out; 
    -moz-animation-timing-function: ease-in-out; 
    -o-animation-timing-function: ease-in-out; 
    -ms-animation-timing-function: ease-in-out; 
    animation-timing-function: ease-in-out; 
	
    -webkit-animation-iteration-count:infinite; 
	-moz-animation-iteration-count: infinite;
	-o-animation-iteration-count: infinite;
	-ms-animation-iteration-count: infinite;
    animation-iteration-count:infinite; 
	
    -webkit-animation-name: bounce; 
    -moz-animation-name: bounce;
    -o-animation-name: bounce;
    -ms-animation-name: bounce;
    animation-name: bounce; 
}
#bkheader_animation_item_left.bkbounce { 
    -webkit-animation-duration: 20s; 
    -moz-animation-duration: 20s; 
    -o-animation-duration: 20s; 
    -ms-animation-duration: 20s; 
    animation-duration: 20s; 
}
#bkheader_animation_item_left_a.bkbounce { 
    -webkit-animation-duration: 15s; 
    -moz-animation-duration: 15s; 
    -o-animation-duration: 15s; 
    -ms-animation-duration: 15s; 
    animation-duration: 15s; 
}


.bkswing { 
	-webkit-animation: animationFrames 5s linear 0s;
	-moz-animation: animationFrames 5s linear 0s;
	-o-animation: animationFrames 5s linear 0s;
	-ms-animation: animationFrames 5s linear 0s;
	animation: animationFrames 5s linear  0s;
	
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-o-animation-iteration-count: infinite;
	-ms-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	
	-webkit-transform-origin: 50% 0%;	
	-moz-transform-origin: 50% 0%;
	-o-transform-origin: 50% 0%;
	-ms-transform-origin: 50% 0%;
	transform-origin: 50% 0%;
}

.bkswing:hover { 
	-webkit-animation: animationFrames 5s linear 0s;
	-moz-animation: animationFrames 5s linear 0s;
	-o-animation: animationFrames 5s linear 0s;
	-ms-animation: animationFrames 5s linear 0s;
	animation: animationFrames 5s linear  0s;
	
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-o-animation-iteration-count: infinite;
	-ms-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	
	-webkit-transform-origin: 50% 0%;	
	-moz-transform-origin: 50% 0%;
	-o-transform-origin: 50% 0%;
	-ms-transform-origin: 50% 0%;
	transform-origin: 50% 0%;
}




/* ################################### ANIMATION SETTINGS ###################################*/
/* ##########################################################################################*/
/* bounce */
@keyframes bounce { 
    0%, 100% {transform: translateY(0);} 
    20% {transform: translateY(-3px);} 
    50% {transform: translateY(5px);} 
    80% {transform: translateY(-5px);} 
} 
@-webkit-keyframes bounce { 
    0%, 100% {-webkit-transform: translateY(0);} 
    20% {-webkit-transform: translateY(-3px);} 
    50% {-webkit-transform: translateY(5px);} 
    80% {-webkit-transform: translateY(-5px);} 
} 
@-moz-keyframes bounce { 
    0%, 100% {-moz-transform: translateY(0);} 
    20% {-moz-transform: translateY(-3px);} 
    50% {-moz-transform: translateY(5px);} 
    80% {-moz-transform: translateY(-5px);} 
} 
@-o-keyframes bounce { 
    0%, 100% {-o-transform: translateY(0);} 
    20% {-o-transform: translateY(-3px);} 
    50% {-o-transform: translateY(5px);} 
    80% {-o-transform: translateY(-5px);} 
}  



/* swing */
@keyframes animationFrames{ 0% { transform:  rotate(-1deg);}
							10% { transform:  rotate(-0deg);}
							50% { transform:  rotate(1deg);}
							60% { transform:  rotate(-0deg);}
							100% { transform:  rotate(-1deg);}
}
@-webkit-keyframes animationFrames{ 0% {  -webkit-transform:  rotate(-1deg);}
							10% {  -webkit-transform:  rotate(-0deg); }
							50% {  -webkit-transform:  rotate(1deg);}
							60% {  -webkit-transform:  rotate(0deg);}
							100% {  -webkit-transform:  rotate(-1deg);}
}
@-moz-keyframes animationFrames{ 0% {  -moz-transform:  rotate(-1deg);}
							10% {  -moz-transform:  rotate(-0deg);}
							50% {  -moz-transform:  rotate(1deg);}
							60% {  -moz-transform:  rotate(0deg);}
							100% {  -moz-transform:  rotate(-1deg);}
}
@-o-keyframes animationFrames{ 0% {  -o-transform:  rotate(-1deg);}
							10% {  -o-transform:  rotate(-0deg);}
							50% { -o-transform:  rotate(1deg);}
							60% {  -o-transform:  rotate(0deg);}
							100% { -o-transform:  rotate(-1deg);}
}




/* ################################ Media Query Smartphone ##################################*/
/* ##########################################################################################*/
@media only screen and (max-width: 1024px){

.bkpage.js #bkheader_animation_item_nav_a{
left: -31px !important;
    left: -4% !important;
}
.bkpage.js #bkheader_animation_item_nav_aa{
    left: -6px !important;
    left: -1% !important;
}
.bkpage.js #bkheader_animation_item_nav_b{
    left: 180px !important;
    left: 23.5% !important;
}
.bkpage.js #bkheader_animation_item_nav_bb{
    left: 154px !important;
    left: 20% !important;
}
.bkpage.js #bkheader_animation_item_nav_c{
left:550px !important;    
left: 61% !important;
}
.bkpage.js #bkheader_animation_item_nav_cc{
left: 530px !important;
z-index:3;    
left: 58% !important;
}
.bkpage.js #bkheader_animation_item_nav_d{	
left: 730px !important;    
    left: 84% !important;
}
.bkpage.js #bkheader_animation_item_nav_dd{
left: 750px !important;    
    left: 86% !important;
}

.bkpage.js #bkheader_animation_item_nav_e{
	left: -346px !important;    
		left: 20% !important;
	} 

.bkpage.js #bkheader_animation_item_nav_ee{
		left: -360px !important;    
		left: 22% !important;
	} 

.bkpage.js #bkheader_animation_items.js #bkheader_animation_item_right {
	left: 650px !important;    
    left: 74% !important;
}
.bkpage.js #bkheader_animation_items.js #bkheader_animation_item_left{
    left: 83px !important;
    left: 11% !important;
}
}