.jssorSliderStartpage {
	width: 100%;
	float:left;
	.transform(translate3d(0,0,0));
	
	
	/* @media (min-width: @screen-lg) {
		div.image {
			.transition(all 0.5s cubic-bezier(0, 0, 0.24, 1.32));
			opacity: 0.6;
		}
	}
	
	&.abm-ui-state-active {
		@media (min-width: @screen-lg) {
			div.image {
				opacity: 1;
			}
		}
	} */
	
	
	
	@media (min-width: @screen-lg) {
			
		div.image {
			.transform(scale(1));
		}
			
		&.abm-ui-state-visited {
			div.image {
				.transform(scale(1.03));
				.transition(all 1.5s cubic-bezier(0, 0, 0.24, 1.32));
			}
			
			&.abm-ui-state-active {
				div.image {
					.transform(scale(1));
				}
			}
		}
		
	}
	
	
	
	
	.sectionRight,.sectionCenter,.sectionLeft {
		float:left;
		height: 300px;
		position: relative;
		background:white;
		
		
		> svg {
			position: absolute;
			left: 50%;
			top: 50%;
			.transform(translate(-50%,-50%));
			height: 50px;
			cursor:pointer;
			opacity:0;
			.transition(opacity 1s);
			
			path {
				fill: @gray-dark !important;
				.transition(all 0.2s);
				.transform(translate(100px, 0));
			}
		}
		
		&:hover {
			> svg {
				path {
					fill: @brand-primary !important;
				}	
			}
		}
	}
	
	.sectionLeft {
		svg {
			.transform(translate(-50%,-50%) rotate(180deg));
		}
	}
	
	.sectionCenter {
		/* background: @gray-dark; */
		.center_cover_background();
		
		
		@media(max-width:@grid-float-breakpoint-max) {
			background: none !important;
		}
		
	}
	
	&.abm-ui-state-active {
		@media (min-width: @screen-md) {
			.sectionRight,.sectionCenter,.sectionLeft {
				> svg {
					opacity:1;
					
					path {
						.transform(translate(0, 0px));
					}
				}
			}
		}
		
	}
	
	.sliderContainer {
		
		overflow:hidden;
  	position: relative;
		/*  &.abm-ui-state-initialised {
			opacity:1;
		}*/
		
	  background: white;
	}
	
	.mobileSliderNav {
		display:block;
	  position: absolute;
	  bottom: 0px;
	  left: 0px;
	  width: 100%;

		
		@media(min-width:@grid-float-breakpoint) {
			display:none;
		}
		
		.mobileSliderNavLeft, .mobileSliderNavRight {
			position: absolute;
			bottom: 0px;
			left: 0px;
			width: 50px;
			height: 80px;
			background:white;
			
			&.mobileSliderNavLeft {
				> svg {
					.rotate(180deg);
				}
			}
			
			&.mobileSliderNavRight {
				left:auto;
				right: 0px;
			}
			
			> svg {
				height: 20px;
				width: 20px;
				bottom: 27px;
				  left: 15px;
				  position: absolute;
				
			}
		}
	}
	
	.slider {
		height: 100%;
		width: 100%;
		position: relative;
		overflow:hidden;
		
		
		/* /@media(max-width:@grid-float-breakpoint-max) {
			height: calc(~'100vh - 60px');
		} */
		
		

		.slides {
			position: absolute;
			top: 0px;
			left: 0px;
			bottom: 0px;
			right: 0px;
			overflow: hidden;
			
			perspective: 1200px;
			background-color:@gray-lighter;
			
			@media(max-width:@grid-float-breakpoint-max) {
				background-color:white;
			}
			
			.slide {
				position: absolute;
				left:0px;
				top:0px;
				visibility: hidden;
				z-index:0;
				
				&.animating {
					visibility: visible;
				}
				
				&.current {
					z-index:1;
					visibility: visible;
				}
				
				&.ontop {
					z-index:2;
					visibility: visible;
				}
				
				height: 100%;
				width: 100%;
				.image {
					position: absolute;
					left: 0px;
					right: 0px;
					bottom: 0px;
					top: 0px;
					z-index:10;
					.center_cover_background ();
					
					@media(max-width:@grid-float-breakpoint-max) {
						bottom: 80px;
					}
					@media(max-width: @screen-xs-max) and (orientation: landscape) {
						bottom: 0;
					}
					
					
				}
				
				.Loader {
					opacity:0;
					z-index:0;
					.transition(all 0.5s);
					
					&.visible {
						opacity:1;
						z-index:12;
					}
				}

				.caption {
					position: absolute;
					left: 50%;
					.transform (translate(-50%, 0));
					width: 1200px;
					max-width: 100%;
					z-index:11;
					
					bottom: 130px;
  				height: 190px;
					
					@media(max-width: 1199px) {
						width: calc(~'100% - 80px');
					}
					
					
					@media(max-width:@grid-float-breakpoint-max) {
						
						.transform (translate(-50%, 0));
						top:auto;
						bottom: -30px;
						width: 100%;
						
						&.noHeadline2 {
							bottom: -70px;
						}
					}
					
					.caption1, .caption1_2 {
						opacity: 1;
						font-size: 60px;
						text-transform: uppercase;
						
						position: absolute;
						top:0px;
						left:0px;
						z-index:2;
						
						@media (max-width: @grid-float-breakpoint-max) {
							height: 38px !important;
							
							&.caption1_2 {
								top:38px !important;
								
							}
						}
						
						width: 100%;
						
						.txt {
							background: rgba(0,172,234,0.9);
							border: 1py solid rgba(0,172,234,0.9);
							.font_audimat_bold;
							white-space: nowrap;
							display:inline-block;
							text-align:left;
							color: white;
							padding: 0 30px;
							line-height: 70px;
							margin-top: 50px;
							position: relative;
							opacity:0;
							

              @media(max-width:@grid-float-breakpoint-max) {
								margin-top:0px !important;
								padding-left: 15px;
  							padding-right: 15px;
							}





							
							.ico {
								position: absolute;
								right: 0px;
								top: -50px;
								overflow: hidden;
								display: block;
								display:none;
								width: 50px;
								height: 50px;
								/* white-space: nowrap; */
								&:before {
									content: ' ';
									width: 75px;
									height: 75px;
									position: absolute;
									right: -42px;
									bottom: -97px;
									display: block;
									.rotate (45deg);
									background: rgba(0,172,234,0.9);
								}
							}
							
						}

						
						
						@media(max-width:@grid-float-breakpoint-max) {
							font-size:24px;
							text-align:center;
							height: 70px;
							
							.txt {

								margin-top: 20px;


                font-size:38px;
								line-height:  43px;
								height: 43px;

                @media (max-width: @screen-xs-max) {
                    font-size: 24px;
										line-height: 38px;
										height: 38px;
                    line-height: 40px;
								}


								
								.ico {
									width: 20px;
									height: 20px;
									top:-17px;
									
									&:before {
										width: 30px;
										height: 30px;
										
										right: -14px;
	  									bottom: -19px;
									}
								}
								
							}
						}

						&.caption1_2 {
								/*top: 43px !important;*/

                @media (max-width: @screen-xs-max) {
                    top: 38px !important;
								}
						}
					}

					.caption2 {
						position: absolute;
						
						z-index:1;
						
						height: 70px;
						width: 100%;
						
						
						.txt {
							 display: inline-block;
							  background: white;
							  padding: 15px 30px;
							  opacity:0;
						}
						
						
						
						@media(max-width:@grid-float-breakpoint-max) {
							width: 100%;
							
							top: 60px !important;
  							height: 80px !important;
  							padding:0;
							
							
							.txt {
								text-align: center;
  								display: block;
  								
  								width: 100%;
  								position: absolute;
  								left:50%;
  								top:50%;
  								
  								
  								.transform(translate(-50%,-50%));
							}
						}
					}
				}
				
				
				
			}
		}
	}
	
	
	.sliderContainer {
		&.abm-ui-state-initialised {
			.slider {
				.slides {
					.slide {
						
						
						#abm-fx.flipInX(
					  		~'.current', 
					  		~'.caption .caption1 .txt',
					  		1s,
					  		1s
				);
				
				#abm-fx.flipInX(
					  		~'.current', 
					  		~'.caption .caption1_2 .txt',
					  		1s,
					  		1.3s
				);
				
				
				
				.caption .caption1 .txt .ico:before {
					bottom:-97px;
					opacity:0;
					.transition(all 0.3s cubic-bezier(0, 0, 0.24, 1.32) 2.2s);
					
					display:none;
				} 
				
				&.current {
					.caption .caption1 .txt .ico:before {
						bottom:-37px;
						opacity:1;
					}
				}
				
				#abm-fx.slide-in.top(~'.current',~'.caption .caption2 .txt',0.3s,cubic-bezier(0, 0, 0.24, 1.32), 2.2s);
						
						
					}
				}
			}
		}
	}
	
		
		
	
	.navigator {
	    position: absolute;
	    width: 100% !important;
	    right: auto !important;
	    left: auto !important;
	    bottom: 0 !important;
	    
	    
	  height: 12px;
	  max-width: 1200px;
	  left: 50% !important;
	  transform: translate(-50%,0);
	  
	  @media (max-width: @grid-float-breakpoint-max) {
	  	display:none;
	  }
	  
	  @media (max-width: 1199px) {
	  	max-width: calc(~'100% - 60px');
	  }
	}
	
	.navigator a {
	    position: absolute;
	    /* size of bullet elment */
	    width: 12px;
	    height: 12px;
	    opacity: 1;
	    overflow: hidden;
	    cursor: pointer;
	    border: 0px;
	    
	    position: relative !important; 
	    float:left;
	    left:0px !important;
	    margin-left:1px;
	    
	    background-color: @gray-dark;
	    
	    span.i {
			display:block;
			position: absolute;
			
			left:0px;
			right: 1px;
			top:0px;
			bottom: 0px;
			
			.transition(background-color 0.5s);
		}
		
		&.current {
			span.i {
				width: 100%;
				background-color: @brand-primary;
			}
		}
		
		&:last-child {
			span.i {
				right: 0px;
			}
		}
		
		
	}
	
	&.startPageSliderRunning {
		.navigator a.current {
			span.i { 
				.animation(current_slide_duration 9s linear);
			}
		}
	}
}

.keyframes(current_slide_duration, {
	0% {
		width: 0%;
	}
	100% {
		width: 100%;
	}
});