@import "fonts.css";

* {
	outline: 0;
	border: 0;
  margin: 0;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: none;
	word-wrap: break-word;
}

*::before, *::after { box-sizing: border-box; }

html, body {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 58em;
}

body {
	font-family: 'Raleway', sans-serif;
	font-weight: 300;
  font-size: 1em;
  display: flex;
  justify-content:center;
		background-color: rgba(0,0,0,1);
  background-image: url(/img/hintergrund.svg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

a#beitrag-hinzu,
div#pager > a {
	box-shadow:inset 0px -3px 7px 0px rgba(0,0,0,.2);
 background: rgb(131,3,3);
	background: -moz-linear-gradient(180deg, rgba(131,3,3,1) 0%, rgba(156,0,9,1) 100%);
	background: -webkit-linear-gradient(180deg, rgba(131,3,3,1) 0%, rgba(156,0,9,1) 100%);
	background: linear-gradient(180deg, rgba(131,3,3,1) 0%, rgba(156,0,9,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#830303",endColorstr="#9c0009",GradientType=1);
	border-radius:.2em;
	display:inline-block;
	color:rgba(255,255,255,1);
	padding: 5px 15px;
	font-size: 1.2em;
	font-weight: 300;
	text-decoration:none;
	text-shadow:0px 1px 0px rgba(0,0,0,.3);
	z-index: 9999;
}

a#beitrag-hinzu {
	position: absolute;
	top: .5em;
	right: .5em;
}

a#beitrag-hinzu:hover {
		box-shadow: 0px -3px 7px 0px rgba(255,255,255,.7);
}

p { margin: 0 0 .6em 0; line-height: 1.5em; }
p.success, p.error { padding: .3em 1em .3em 1.9em; -webkit-border-radius: .5em; border-radius: .5em; background-position: .25em .25em; background-repeat: no-repeat; background-size: 1.2em; }
p.success { background-color: rgba(0,128,0,1); color: rgba(255,255,255,1); background-image: url('/img/success.svg'); }
p.error { background-color: rgba(217,0,0,1); color: rgba(255,255,255,1); background-image: url('/img/error.svg'); }
p.hinweis { font-size: .9em; font-weight: bold;}

.right { float: right; }
.left { float: left; }
.clearer { clear: both; }

img {
  padding:0px;
  margin:0px;
  border:0px;
	max-width:100%;
	margin: auto;
}

a {
  outline: none;
  text-decoration:none;
  color:rgba(0,0,0,0.7);
		cursor:pointer;
}

a:active,
a:focus,
a:link,
a:visited {
    text-decoration:none;
}

a:hover {
    text-decoration:underline;
}

body > header {
	position: absolute;
  /*font-family: 'Tangerine', sans-serif;*/
  width: 100%;
}

body > header > a > h1 {
		background: url(/img/logo_ws.svg);
		background-repeat: no-repeat;
		width: 500px;
		height: 130px;
		margin-top: 10px;
		margin-left: 50px;
		z-index: 99999;
}

body > header > h2 {
 font-size: 1.4em;
	padding: 2px 25px;
	font-family: Verdana;
	font-weight: 100;
 text-align: left;
	margin-left: 30px;
	color: rgba(255,255,255,1);
	margin-top: -25px;
}


body > main {
  position: absolute;
  top:0;
  width: 60em;
  height: 58em;
  background-image: url(/img/Trauerband.svg);
  background-repeat: no-repeat;
  background-size: 60%;
  background-position: 80% 95%;
	display:flex;
	justify-content: center;
	box-sizing: border-box;
}


body > main div.scroll {
	width:100%;
	height:100%;
	overflow: auto;
  scrollbar-width: thin;          /* "auto" or "thin" */
  scrollbar-color: rgba(0,0,0,.8) rgba(0,0,0,.1);
}


body > main div.scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,.8) border: 1px solid rgba(0,0,0,.1);;
}

/* Works on Chrome, Edge, and Safari */
body > main div.scroll::-webkit-scrollbar {
  width: 12px;
}

body > main div.scroll::-webkit-scrollbar-track {
  background: border: 1px solid rgba(0,0,0,.1);;
}

body > main div.scroll::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,.8);
  border-radius: 20px;
  border: 1px solid rgba(0,0,0,.8);
}

body > main > img.schleife {
	  width: 60em;
    height: 58em;
}

body > main > div {
		width: 600px;
		height: 500px;
		margin-top: 190px;
		padding: 75px 70px 30px 50px;
		box-sizing: border-box;
}

body > main > div h3 {
	margin-bottom: 15px;
}

.footnote {
	font-size:.7em;
	opacity: .9;
}

.aks-file-upload-label { width: auto; }

#aks-file-uploaddiv, #uploadfile {width: 0; height: 0; display: none; opacity: 0%; }

aks-file-upload div.aks-file-upload {
	border: 1px solid rgba(200,200,200,1);
	background-color: rgba(255,255,255,.8);
}

footer {
	width:100%;
	position: fixed;
	bottom: 0;
	padding: .6em 5em;
	box-sizing: border-box;
	background-color: rgba(0,0,0,.5);
	display: flex;
	justify-content: space-between;
	z-index:999999;
}

footer > div.visits { color: rgba(255,255,255,.8); font-size: .9em; text-align: center;}
footer > div.visits > div {
	width: 100%;
	text-align: center;
	color: rgba(131,3,3,1);
	/*text-shadow: 1px 1px rgba(255,255,255,.5);*/
}

footer > div.visits > div > span {	font-size: 1.5em; }

footer ul {	list-style: none; padding-left: 0; }

footer ul li { display: inline-block; }

footer ul li a { color: rgba(255,255,255,1); padding: 0 .5em; font-size: 1em; }

form label { font-size: 1em; }

form input[type=text],
form input[type=email],
form input[type=password],
form textarea {
	border: 1px solid rgba(200,200,200,1);
	padding: .4em;
	-webkit-border-radius: .2em;
	border-radius: .2em;
	font-family: 'Raleway', sans-serif;
	font-weight: 300;
  font-size: .9em;
	color: rgba(110,110,110,1);
	vertical-align: top;
	width: 100%;
	background-color: rgba(255,255,255,.8);
	box-sizing: border-box;
}

form input[type=text]:focus,
form input[type=email]:focus,
form input[type=password]:focus,
form textarea:focus { background-color: rgba(255,255,255,1); }

form button,
.button,
.aks-file-upload-label > span {
	color: rgba(255,255,255,1);
  text-shadow: 0 1px rgba(0,0,0,0.15);
 background: rgb(131,3,3);
background: -moz-linear-gradient(180deg, rgba(131,3,3,1) 0%, rgba(156,0,9,1) 100%);
background: -webkit-linear-gradient(180deg, rgba(131,3,3,1) 0%, rgba(156,0,9,1) 100%);
background: linear-gradient(180deg, rgba(131,3,3,1) 0%, rgba(156,0,9,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#830303",endColorstr="#9c0009",GradientType=1);

	padding: .5em 1.7em;
	font-size: 1em;
	cursor: pointer;
	-webkit-border-radius: .2em;
	border-radius: .2em;
}

form button[disabled="disabled"] {
	opacity: .6;
  animation: fade 1s;
}

form input[type=checkbox]  + label { line-height: 1.2em; }
form input[type=checkbox] { display:none; }
form input[type=checkbox] + label::before {
  width: 22px;
  height: 22px;
  background-image: url('/img/checkbox_unchecked.svg');
  background-repeat: no-repeat;
  display: block;
  content: "";
  float: left;
  margin-right: .7em;
  cursor: pointer;
}
form input[type=checkbox].error + label::before { background-image: url('/img/checkbox_unchecked_error.svg'); }
form input.error, form textarea.error { background-color: rgba(255,0,0,.2); }
form input[type=checkbox]:checked+label::before { background-image: url('/img/checkbox_checked.svg'); }
form.loading > input[type='submit'], form.loading > button[name='submit'] {	opacity: .7; cursor: default; }

div.clickEffect{
	position:fixed;
	box-sizing:border-box;
/*	border-style:solid;
	border-color:#000000;
	border-radius:50%;*/
	background-image: url('/img/herz.svg');
	background-repeat: no-repeat;
	animation:clickEffect 0.4s ease-out;
	z-index:99999;
}
@keyframes clickEffect{
	0%{
		opacity:1;
		width:0.5em; height:0.5em;
		margin:-0.25em;
		border-width:0.5rem;
	}
	100%{
		opacity:0.1;
		width:15em; height:15em;
		margin:-7.5em;
		border-width:0.03rem;
	}
}

div#pager {
	position: relative;
	bottom: -5px;
	width: 98%;
	margin-left: 9px;
	font-family: Arial;
	font-size: 1.2em;
}

ul.img {	list-style: none; padding-left:0; }
ul.img > li { text-align: center; padding: 10px 0;}
ul.img > li img { cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; }

@media all and (max-width: 950px) {
	body { overflow-x: hidden; }
	footer {	padding: .4em 1em; }
	body > header > a > h1 { margin-left: 10px;}
	body > header > h2 { margin-left: 0px;}
} 


@media all and (max-width: 780px) {
	footer > ul {	display: none; }
	a#beitrag-hinzu {	display: none; }
} 


@media all and (max-width: 670px) {
	html, body, body > main { background-image: none; height: 100%; }
	body {  background: rgb(105,105,115);
					background: -moz-linear-gradient(180deg, rgba(105,105,115,1) 0%, rgba(205,205,205,1) 50%, rgba(111,111,111,0.9247899843531162) 100%);
					background: -webkit-linear-gradient(180deg, rgba(105,105,115,1) 0%, rgba(205,205,205,1) 50%, rgba(111,111,111,0.9247899843531162) 100%);
					background: linear-gradient(180deg, rgba(105,105,115,1) 0%, rgba(205,205,205,1) 50%, rgba(111,111,111,0.9247899843531162) 100%);
					filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#696973",endColorstr="#6f6f6f",GradientType=1);
					background-attachment: fixed;}
	body > header > a >  h1 { margin-left: 5px; 		width: 300px;		height: 80px;}
	body > header > h2 { margin-left: 0px; font-size: 1em; padding: 10px 5px; margin-top: -5px;}
	body > main { width: 100%; display: block; height: auto; }
	body > main > h3, body > main > div { background-color: rgba(255,255,255,.7); -webkit-border-radius: .2em; border-radius: .2em;}
	body > main > div { height: auto; margin-left: auto; margin-right: auto; margin-bottom: 135px; padding: 25px; margin-top: 140px; }
	footer { background-color: rgba(0,0,0,.8); }
	footer > div.visits { font-size: .7em; }
	footer > div.visits > div > span {	font-size: 1.1em; }
	div#pager {	bottom: -95px;	width: 100%;	margin-left: 0px;	}
	div#pager > a { 	padding: 15px 45px; }
}

@media all and (max-width: 620px) {
	body > main { padding: 0 10px; }
	body > main > div { width: 100%; }
}

@media all and (max-width: 500px) {
		footer > div { width: 100%; }
		footer > div:first-of-type { display: none; }
		body > main > div {	padding: 10px; }
}

@media all and (max-width: 400px) {
		body > main { padding: 0 4px; }
}