@keyframes delayFadeOut {
  0% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
html, body {
	position:relative;
	width:100%;
	height:100%;
	max-height:100%;
	padding:0;
	margin:0;
	overflow:hidden;
}
body {
	height:calc(100% - 40px);
	text-align:center;
	position:relative;
}
#logo {
	display:block;
	margin:40px auto;
	width:90%;
	max-width:500px;
}
#motto {
	font-size:24px;
}
footer {
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:40px;
	line-height:40px;
}
footer > a {
	display:none;
}
#reklamation-list,
#reklamation {
	padding:25px;
	width:500px;
	/*box-shadow:0px 0px 5px 2px #efefef;*/
	border:1px solid #ddd;
	position:absolute;
	left:100%;
	bottom:30%;
	transition:left 0.5s ease-in;
	background-color:#fff;
	height:350px;
}
#reklamation-list {
	bottom:calc(30% - 60px);
}
#reklamation-list:hover,
#reklamation:hover {
	left:calc(100% - 550px);
}
.toggle {
	position:absolute;
	top:-1px;
	right:100%;
	padding:10px;
	border-top:1px solid #ddd;
	border-left:1px solid #ddd;
	border-bottom:1px solid #ddd;
	border-top-left-radius:5px;
	border-bottom-left-radius:5px;
	font-size:32px;
	background-color:#fff;
	min-width:36px;
	cursor: pointer;
}
.close {
	display:none;
	float:right;
	font-size:32px;
}
#reklamation-list ul {
  max-height: 330px;
  overflow: auto;
	list-style:none;
	padding:0;
}
#reklamation-list li {
	text-align:left;
	padding:10px;
}
#reklamation-list li:nth-child(2n) {
	background-color:#efefef;
}
#disclaimer {
	display:block;
	font-size:8px;
	color:#aaa;
	line-height:1;
	margin-top:15px;
}
.col-1,
.col-2 {
	display:inline-block;
	width:45%;	
	vertical-align:top;
}
input, textarea {
	width:calc(98% - 20px);
	margin:5px 1%;
	max-width:300px;
}
input {
	padding:5px;
}
input[name="subj"]+input {
	opacity:0;
	z-index:-1;
	position:absolute;	
}
textarea {
	height:95px;
	padding:5px;
}
.msg {
    max-width: 300px;
    margin: 25px auto;
    border: 1px solid green;
    border-radius: 10px;
    padding: 25px;
    background-color: green;
    color: white;
    font-weight: 600;
  opacity: 0;
  animation-name: delayFadeOut;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 5s;
}
@media all and (max-width:767px) {
	.close {
		display:block;
	}
	#reklamation-list,
  #reklamation {
		width:calc(100% - 20px);
		padding:10px;
		bottom:10%;
	}
	#reklamation-list {
		bottom:calc(10% - 60px);
	}
	#reklamation-list:hover,
	#reklamation-list:focus,
	#reklamation:hover,
	#reklamation:focus {
		left:100%;
	}
  #reklamation-list.show,
  #reklamation.show {
	  left:0;
	}
}