@charset "UTF-8";

/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}ul{list-style:none}button,input,select,textarea{margin:0}html{box-sizing:border-box}*,*::before,*::after{box-sizing:inherit}img,video{height:auto;max-width:100%}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}td:not([align]),th:not([align]){text-align:left}

body {
	overflow: hidden;
}

#wrapper {
	position: relative;
	width: 300px;
	height: 600px;
	overflow: hidden;
	background-color: #E8EDEE;
}

#initial {
	z-index: 1;
	position: absolute;
	width: 70px;
	top: 10px;
	right: 10px;
}

#bottomBox,
#topBox {
	position: relative;
	overflow: hidden;
	width: 300px;
	top: 0;
}

/* Left Box */
#bottomBox {
	height: 390px;
	left: 0;
	background-color: #110A35;
}

/* Left Box Elements */
#lB_headline,
#lB_subline,
#lB_success { margin: 0 0 20px 20px }

#lB_headline { margin-top: 20px; animation: headline 5s 1; }

#lB_subline { animation: subline 5s 1; }

#lB_err,
#lB_gdpr {
	color: #E8EDEE;
	font-family: Arial, sans-serif;
	font-size: 12px;
	position: absolute;
	left: 20px;
	bottom: 120px;
	display: none;
}
#lB_success,
#lB_loader {
	position: absolute;
	left: 0;
	bottom: 0;
	display: none;
}
#lB_loader {
	left: 30px;
	bottom: 28px;
}

#lB_cta { position: relative; display: block; }

#lB_gdpr { display: block; bottom: -30px; left: 0 }
#lB_gdpr .underline { text-decoration: underline }

form {
	position: absolute;
	margin: 0 0 0 20px;
	bottom: 40px;
	animation: cta 5s 1;
}

button {
	display: block;
	cursor: pointer;
	margin: 4px 0 0 0;
	padding: 0;
	border: 0;
	border-radius: 0px;
	outline: none;
}

input.mail {
	display: block;
	font-size: 14px;
	line-height: 13px;
	color: #110A35;
	background-color: #E8EDEE;
	padding: 8px;
	border: 1px solid transparent;
	border-radius: 0;
	min-width: 240px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: unset;
	outline: none;
	margin-left: 0;
}


/* Right Box*/
#topBox {
	height: 210px;
	right: 0;
	background-image: url("bg.jpg");
	background-size: cover;
}

/* Animations */
@keyframes headline {
  	0% {opacity: 0;-khtml-opacity: 0;}
	10% {opacity: 0;-khtml-opacity: 0;} 
	20% {opacity: 1;-khtml-opacity: 1}
	90% {opacity: 1;-khtml-opacity: 1}
	100% {opacity: 1;-khtml-opacity: 1;}
}
	
@keyframes subline {
  	0% {opacity: 0;-khtml-opacity: 0;}
	35% {opacity: 0;-khtml-opacity: 0;} 
	45% {opacity: 1;-khtml-opacity: 1}
	90% {opacity: 1;-khtml-opacity: 1}
	100% {opacity: 1;-khtml-opacity: 1;}
}
	
@keyframes cta {
  	0% {opacity: 0;-khtml-opacity: 0;}
    10% {opacity: 0;-khtml-opacity: 0;}
	60% {opacity: 0;-khtml-opacity: 0; transform: scale(1.4);-khtml-transform: scale(1.4);}
	67% {opacity: 1;-khtml-opacity: 1; transform: scale(1);-khtml-transform: scale(1);}
	90% {opacity: 1;-khtml-opacity: 1}
	100% {opacity: 1;-khtml-opacity: 1;}
}