* {
  box-sizing: border-box;
  /*outline:1px solid #666;    DEBUG*/ 
}

body {
	font-size:16px;
	padding-top:0px;
	background: #000;
}


#content { width:100%; }

#playersonline {
	max-height:198px; overflow:auto;  scrollbar-width: thin; scrollbar-color: #441d1d #2e1212;
}
#playersonline::-webkit-scrollbar {
  width: 5px;
}
 
#playersonline::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
 
#playersonline::-webkit-scrollbar-thumb {
  background-color: #2e1212;
  outline: 1px solid #441d1d;
}

////////////////////

* { box-sizing: border-box; }
@import url('https://fonts.googleapis.com/css?family=Rubik:400,500&display=swap');


body {
  font-family: 'Rubik', sans-serif;
}

.header {
  height:100vh;
  overflow-y:auto;
  overflow-x: hidden;
  z-index:-1;
  perspective:10px;
}

.background, .foreground, .foreground2, .foreground3 {
	position:absolute;
	z-index:-1;
	height:100%;
	width:100%;
	object-fit:cover;
}

.foreground, .foreground2, .foreground3 {
	object-fit:contain;
	max-width:1920px;
	width:100%;
	max-height:1080px;
	height:100%;
}

.background {
	transform: translateZ(-10px) scale(2.5);
	top:-400px;
}

.foreground {
	transform: translateZ(-5px) scale(1.5);
	background:url(images/Sheradinchen.png) center no-repeat;
	left:-200px;
	top:-30px;
}

.foreground2 {
	transform: translateZ(-3px) scale(1.25);
	background:url(images/Paul.png) center no-repeat;
	left:-200px;
	top:-30px;
}
.foreground3 {
	transform: translateZ(-2px) scale(1.05);
	background:url(images/konzernfrau.png) right no-repeat;
	right:-75px;
	top:-50px;
}

@media (min-resolution: 2dppx) {
  /* für hochauflösende Displays, z. B. 200 % oder 300 % Skalierung */
}


.container {
  display: flex;
}

.loginmask {
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  animation-name: left;
  animation-duration: 1.5s;
  animation-fill-mode: both;
  animation-delay: 1.5s;
  background:#444;
}


.header > h2 {
  margin: 0;
  color: #4f46a5;
}

.header > h4 {
  margin-top: 10px;
  font-weight: normal;
  color: rgba(0,0,0,.4);
}

.form {
  max-width: 80%;
  display: flex;
  flex-direction: column;
}

.form > p {
  text-align: right;
}

.form > p > a {
  color: #000;
}

.form-field {
  height: 46px;
  padding: 0 16px;
  border: 2px solid #ddd;
  border-radius: 4px;
  font-family: 'Rubik', sans-serif;
  outline: 0;
  transition: .2s;
  margin-top: 20px;
  letter-spacing:3px;
}

input:focus, .form-field:focus {
  border-color: #551818;
}




////////////////////



.pageheader {display:none;}  

#titleframe {display:none;}
#content, .footer { width:100%; background:none; margin:0; border:0; }

#box1 {
	background:url(images/start/neuzeit-logd.jpg) center top;
    border: 1px solid #99968E;
    border-radius:7px 7px 0px 0px;
    box-shadow: 2px 4px 20px rgba(0, 0, 0, 0.6);
	background-position-y: 0%;
    color: #E0DED9;
    padding: 20px 25px 10px 25px;
	max-width:450px;
	margin:5px 20px;
	margin-left: auto;
	margin-right: auto;
	height:270px;
}

 #box2{
	color:#E0DED9;
	border:1px solid #99968E;
	background:url(images/start/neuzeit-logd.jpg) center top;
	background-position-y: -275px;
	padding: 20px 20px 25px 20px;
	box-shadow:2px 4px 20px rgba(0, 0, 0, 0.6);
	border-radius:0px 0px 7px 7px;
	max-width:450px;
	margin:5px 20px 100px 20px;
	margin-left: auto;
	margin-right: auto;
	top:200px;
	}

#shera-logo {
	position:relative; 
	top:78px; 
	margin:0 auto; 
	left:110px;
	width:330px;
	z-index:99;
}

#box2 h2, #box1 h2, .story h1 {
	margin-top: 0;
	padding-top:0px;
    font-size: 2em;
    font-style: italic;
    line-height: 1.2em;
    margin-bottom: 24px;
	font-family: Georgia,Times,'Times New Roman',serif;
    font-weight: normal;
	outline: medium none;
	color: #E0DED9;
}

#box2 p {
	font-family: Georgia,Times,'Times New Roman',serif;
    font-weight: normal;
}

#content {
	padding:0;

}
#content, .footer, #navbar, .chatbar {
	box-shadow:none !important;
}

#navbar {
	border-bottom:0 !important;
}

#loginform {
	margin-top:25px;
}

.footer {
	display:none !important;
}
	
#footer-info {
	position:relative;
	width:100%;
	background-position: 0 0;
    height: auto;
    min-height: 108px;
    overflow: hidden;
	padding-top:20px;
	padding-bottom:50px;
	-moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
	background-image: linear-gradient(rgba(35, 12, 12, 0.7) 0%, rgba(35, 12, 12, 1) 45%);
    border-color: #99968E -moz-use-text-color;
    border-style: solid none;
    border-width: 1px medium;
}

.two-columns {
	float: left;
    margin-right: 20px;
    width: 400px;
	}

.one-column {
	float: left;
    width: 250px;
	margin-right: 10px;
}

.snippet {
	 border: 1px solid transparent;
    margin: 0 auto;
    padding: 0 25px;
	width:100%;
    max-width: 1260px;
}

.snippet a {
	display:block;
	line-height:1.8em;
}


.snippet a:hover {
	color:#fff;
	padding-left:5px;
}

.snippet p {
	margin: 1em 0;
    padding: 0;
    line-height: 1.4em;
}

.snippet h2 {
	border-bottom:1px dotted #4d4141;
    font-size: 1.5em;
    margin: 10px 0;
    padding: 0 0 5px;

    font-family: Georgia,Times,'Times New Roman',serif;
    font-weight: normal;

}

.abschluss {
	display:none;
}


input[type=text], input[type=password], input[type=email] {
	max-width:500px;
	padding:10px !important;
	width:100%;
	margin-bottom:8px;
	background:rgba(91,83,81,0.7) !important;
	letter-spacing:1px;
}

.button {
	width:100%;
	display:block;
	padding: 12px 10px;
	border: 0;
	background: linear-gradient(to right, #de48b5 0%,#0097ff 100%); 
	border-radius: 3px;
	margin-top: 5px;
	color: #fff;
	letter-spacing: 1px;
	font-family: 'Rubik', sans-serif;
}

#foot {
	background:linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85)), url(images/start/browserspiel3.jpg) bottom center no-repeat fixed;
	background-size:cover;
}
.story {
	padding-bottom:100px;
	margin:auto;
	max-width:1260px;
	column-count:2;
	column-gap:50px;
	padding-top:75px;
	text-shadow:1px 2px 4px #000;
	font-family: 'Roboto', sans-serif;
	line-height:1.45em;
}

.story p {
	text-align:justify;
	}

.story img {
	border:2px solid #fff;
	border-radius:5px;
	max-width:100%;
	box-shadow:rgba(0,0,0,0.3) 0px 3px 7px;
	margin-bottom:32px;
}

#buergeron {
	width:215px; 
	padding:5px; 
	background:url(images/start/buerger.png) repeat-y; 
	border-radius:7px; 
	position:absolute; 
	right:0; 
	top:120px;
	}
	
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted;
}

.tooltip .tooltiptext {
  visibility: hidden;
  min-width: 180px;
  max-width:500px;
  background-color: #eee;
  color: #444;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  text-shadow:none;
  padding:5px;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
  
  /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
  opacity: 0;
  transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}	
	
h1 { font-family: 'Yanone Kaffeesatz', sans-serif; font-size:2em; }

	#navbar, .vitalbar, #buergeron {
		display:none !important;
	}
	
@media screen and (max-device-width: 960px) {
	#box1, #box2 {
    width:calc(100% - 40px);
	margin:auto;
	}
	
	#box1 {
		margin-bottom:5px;
	}
	
	#box2 {
		margin-bottom:32px;
	}
	
	.foreground, .foreground2, .foreground3 {
		display:none;
	}
	
	.story {
	padding-bottom:30px;
	margin:auto;
	column-count:1;
	padding-top:75px;
	}
	
	.story img {
		border-radius:0px;
		margin-top:16px;
		border:0px;
		box-shadow:0px 5px 20px #000;
	}
	
	.story h1, .story h2, .story p {
		padding-left:20px;
		padding-right:20px;
	}
	
	.one-column, .two-columns {
		width:100%;
	}
	
	.nomobile {
		display:none;
	}
	
	#shera-logo {
		left:0px;
		max-width:330px;
		width:100%;
		margin:0 auto;
		top:45px;
	}
}