.sl-slider-wrapper {
	width: 800px;
	height: 400px;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
}

.sl-slider {
	position: absolute;
	top: 0;
	left: 0;
}

/* Slide wrapper and slides */

.sl-slide,
.sl-slides-wrapper,
.sl-slide-inner {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
} 

.sl-slide {
	z-index: 1;
}

/* The duplicate parts/slices */

.sl-content-slice {
	overflow: hidden;
	position: absolute;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	background: #fff;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	opacity : 1;
}

/* Horizontal slice */

.sl-slide-horizontal .sl-content-slice {
	width: 100%;
	height: 50%;
	left: -200px;
	-webkit-transform: translateY(0%) scale(1);
	-moz-transform: translateY(0%) scale(1);
	-o-transform: translateY(0%) scale(1);
	-ms-transform: translateY(0%) scale(1);
	transform: translateY(0%) scale(1);
}

.sl-slide-horizontal .sl-content-slice:first-child {
	top: -200px;
	padding: 200px 200px 0px 200px;
}

.sl-slide-horizontal .sl-content-slice:nth-child(2) {
	top: 50%;
	padding: 0px 200px 200px 200px;
}

/* Vertical slice */

.sl-slide-vertical .sl-content-slice {
	width: 50%;
	height: 100%;
	top: -200px;
	-webkit-transform: translateX(0%) scale(1);
	-moz-transform: translateX(0%) scale(1);
	-o-transform: translateX(0%) scale(1);
	-ms-transform: translateX(0%) scale(1);
	transform: translateX(0%) scale(1);
}

.sl-slide-vertical .sl-content-slice:first-child {
	left: -200px;
	padding: 200px 0px 200px 200px;
}

.sl-slide-vertical .sl-content-slice:nth-child(2) {
	left: 50%;
	padding: 200px 200px 200px 0px;
}

/* Content wrapper */
/* Width and height is set dynamically */
.sl-content-wrapper {
	position: absolute;
}

.sl-content {
	width: 100%;
	height: 100%;
	background: #fff;
}

/* Default styles for background colors */
.sl-slide-horizontal .sl-slide-inner {
	background: #ddd;
}

.sl-slide-vertical .sl-slide-inner {
	background: #ccc;
}

#druckversion {
	position:absolute;
	width: 47px;
	height: 99px;
	background-image: url(../images/druckversion.png);
	background-size: contain;
	top: 0; 
	right: 4%;
	margin-right: 5px;
	z-index: 999;
}

.floating {
	animation-name: Floatingx;
	animation-duration: 3.5s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}

@keyframes Floatingx{
    from {-webkit-transform:translate(0, 0px);}
    55% {-webkit-transform:translate(0, 20px);}
    to {-webkit-transform: translate(0, -0px);    }    
}
    

.login {
	height: 100%;
	width: 100%;
	background-color: #8EC5FC;
	background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
	overflow: hidden;
	text-align: center;
}

.login-container {
	max-width: 815px;
	margin: 80px auto 0;
	padding: 0 20px;
}

.login .input {
	width: 100%;
	border: none;
	background-color: #fff;
	line-height: 80px;
	font-size: 30px;
	color: #000;
	border-radius: 10px;
	box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
	padding: 10px 20px;
	font-family: 'Playfair Display', serif;
	font-weight: 900;
	max-width: 500px;
	letter-spacing: 5px;
}
.input:focus {
	 outline: none;
}
.submit-container {
	text-align: center;
	padding-top: 20px;
}
.login .submit {
	background-image: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%);
	color: #404040;
    font-weight: bold;
    letter-spacing: 2px;
	border: none;
	text-align: center;
	margin-top: 20px;
	padding: 15px 30px;
	font-size: 20px;
	border-radius: 30px;
	transition: all 0.5s ease;

}
.login .submit:hover {
	cursor: pointer;
	transform: scale(1.05);
	box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
}

.login h1 {
	text-align: center;
	padding-top: 40px;
	padding-bottom: 30px;
	color: #5d508e;
	font-family: 'Playfair Display', serif;
	font-weight: 900;
	font-size: 50px;
}

.login .error {
	position: absolute;
	border-radius: 15px;
	background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);
	font-weight: bold;
	text-align: center;
	color: #fff;
	padding: 30px 20px 20px 20px;
	top: -100px;
	width:300px;
	font-size: 19px;
	left: 50%;
	margin-left: -150px;
	box-shadow:0px 0px 13px #B0B0B0;
	opacity: 0;
}
.login .error:before {
	content: '';
	background-size: contain;
    width: 25px;
    height: 25px;
    display: block;
    float: left;
    margin-right: 10px;
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnN2Z2pzPSJodHRwOi8vc3ZnanMuY29tL3N2Z2pzIiB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgeD0iMCIgeT0iMCIgdmlld0JveD0iMCAwIDUxMS45OTkgNTExLjk5OSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTEyIDUxMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgY2xhc3M9IiI+PGc+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+Cgk8Zz4KCQk8cGF0aCBkPSJNNTA0LjI1MSwzOTkuNTVMMzA1LjQ5NSw1NS4yOTZDMjk1LjE2NCwzNy40MDIsMjc2LjY2LDI2LjcyLDI1NS45OTksMjYuNzJzLTM5LjE2NSwxMC42ODMtNDkuNDk2LDI4LjU3Nkw3Ljc0OCwzOTkuNTUgICAgYy0xMC4zMzEsMTcuODk0LTEwLjMzMSwzOS4yNTksMCw1Ny4xNTNjMTAuMzMxLDE3Ljg5MywyOC44MzQsMjguNTc2LDQ5LjQ5NiwyOC41NzZoMzk3LjUxMWMyMC42NjEsMCwzOS4xNjUtMTAuNjgzLDQ5LjQ5Ni0yOC41NzYgICAgQzUxNC41ODEsNDM4LjgwOSw1MTQuNTgxLDQxNy40NDQsNTA0LjI1MSwzOTkuNTV6IE00NzguMjUxLDQ0MS42OTFjLTQuOTA1LDguNDk0LTEzLjY4OCwxMy41NjUtMjMuNDk2LDEzLjU2NUg1Ny4yNDQgICAgYy05LjgwOCwwLTE4LjU5Mi01LjA3MS0yMy40OTYtMTMuNTY1Yy00LjkwNC04LjQ5NC00LjkwNC0xOC42MzcsMC0yNy4xMzFMMjMyLjUwMyw3MC4zMDYgICAgYzQuOTA1LTguNDk0LDEzLjY4OC0xMy41NjUsMjMuNDk2LTEzLjU2NWM5LjgwOCwwLDE4LjU5Miw1LjA3MSwyMy40OTYsMTMuNTY1TDQ3OC4yNTEsNDE0LjU2ICAgIEM0ODMuMTU1LDQyMy4wNTQsNDgzLjE1NSw0MzMuMTk3LDQ3OC4yNTEsNDQxLjY5MXoiIGZpbGw9IiNmZmZmZmYiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiIHN0eWxlPSIiIGNsYXNzPSIiPjwvcGF0aD4KCTwvZz4KPC9nPgo8ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgoJPGc+CgkJPHBhdGggZD0iTTI1NS45OTksMzU1LjE4M2MtMTEuMDM2LDAtMjAuMDE1LDguOTc5LTIwLjAxNSwyMC4wMTVjMCwxMS4wMzYsOC45NzksMjAuMDE1LDIwLjAxNSwyMC4wMTUgICAgYzExLjAzNiwwLDIwLjAxNS04Ljk3OSwyMC4wMTUtMjAuMDE1QzI3Ni4wMTQsMzY0LjE2MiwyNjcuMDM1LDM1NS4xODMsMjU1Ljk5OSwzNTUuMTgzeiIgZmlsbD0iI2ZmZmZmZiIgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCIgc3R5bGU9IiIgY2xhc3M9IiI+PC9wYXRoPgoJPC9nPgo8L2c+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+Cgk8Zz4KCQk8cmVjdCB4PSIyNDAuOTg3IiB5PSIxNzAuMDQ0IiB3aWR0aD0iMzAuMDIyIiBoZWlnaHQ9IjE1NS4xMTUiIGZpbGw9IiNmZmZmZmYiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiIHN0eWxlPSIiIGNsYXNzPSIiPjwvcmVjdD4KCTwvZz4KPC9nPgo8ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8L2c+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjwvZz4KPGcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPC9nPgo8ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8L2c+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjwvZz4KPGcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPC9nPgo8ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8L2c+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjwvZz4KPGcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPC9nPgo8ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8L2c+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjwvZz4KPGcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPC9nPgo8ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8L2c+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjwvZz4KPGcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPC9nPgo8L2c+PC9zdmc+);
}

.login img {
	max-width: 300px;
	width: 100%;
}

.animate__animated {
  animation-duration: 6s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
}


@keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  2% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  4% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  6% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  8% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  10% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  12% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.animate__rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
}

@media (min-width: 850px) and (max-height: 750px) {
	.login-container {
	    margin: 0px auto 0;
	}
	.login img {
    max-width: 220px;
	}
	.login h1 {
		padding-top: 0;
	}
}
@media (max-width: 850px) {
	.login-container {
	    margin: 0px auto 0;
	}
	.login img {
    max-width: 220px;
	}
	.login h1 {
		padding-top: 0;
		font-size: 30px;
	}
	.login .input {
		line-height: 56px;
    font-size: 16px;
	}
}