/* Oswald-700 - latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/Oswald_700.eot'); /* IE9 Compat Modes */
  src: local('Oswald Bold'), local('Oswald-Bold'),
       url('../fonts/Oswald_700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/Oswald_700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/Oswald_700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/Oswald_700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/Oswald_700.svg#Oswald') format('svg'); /* Legacy iOS */
}

/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v18-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Roboto'), local('Roboto-Regular'),
       url('../fonts/roboto-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v18-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v18-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-700 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/roboto-v18-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Roboto Bold'), local('Roboto-Bold'),
       url('../fonts/roboto-v18-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v18-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v18-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v18-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v18-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
}




body { background-color: #000000; color: #ffffff; font-family: 'Roboto', sans-serif; }
h1, h2, h3, .regbutton, .login, #homeloginform { font-family: 'Oswald', sans-serif; }
h2.h1 { font-family: 'Oswald', sans-serif; font-size: 36px; margin-top: 10px; }
input[type="text"], input[type="password"] { font-family: 'Roboto', sans-serif; }

#homebackground { display:none; background-color: #000000; background-color: rgba(0,0,0,0.7); position:fixed; z-index:1000; top:0; left:0; width:100%; height:100%; overflow:hidden; cursor:pointer; }
#homebackground img { position: absolute; left: 50%; top:30%; margin-left:-68px; margin-top:-40px; }
#homeloginform { display:none; background-color: #CC6600; position:fixed; z-index:1010; top:30%; left:50%; margin-left:-25%; width:50%;
  border-top-right-radius: 5px;
   border-top-left-radius: 5px;
  border-bottom-right-radius: 5px;
   border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
   border-bottom-left-radius: 5px;
  border-bottom-left-radius: 5px;
   border-top-left-radius: 5px;
}
#homeloginform form { padding:20px; font-size:110%; }
#homeloginform form a { color: #ececed; }
#homeloginform form label { font-size:120%; }
#homeloginform form .btn-default { text-transform:uppercase; font-size:120%; padding: 2px 10% 2px 10%; color:#ffffff; background-color:#666666; }

#homeparallax div { height: 100vh; background-attachment: fixed; background-position: center center; -webkit-background-size: 100%; -moz-background-size: 100%; -o-background-size: 100%; background-size: 100%; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
#homevisual1 { background-image: url('../img/2024/visual1.jpg'); }
#homevisual2 { background-image: url('../img/2024/visual2.jpg'); }
#homevisual3 { background-image: url('../img/2024/visual3.jpg'); }

#header { background-color: #000000; background-color: rgba(0,0,0,0.6); width:100%; position:fixed; top:0; left:0; z-index:950;  }
#header .logo { margin-top:15px; margin-bottom:-15px; }
#header .login { margin-top:10px; margin-bottom:15px; }
#header .login p { font-size:250%; color: #CC6600; padding-right:20px; padding-bottom:0;margin-bottom:5px; white-space: nowrap; cursor:pointer; }
#header .login p:hover { color: #AA4400; }

#homeregisterfloat { position:fixed; z-index:900; top:40%; }
#homeaboutfloat { position:fixed; z-index:910; top:65%; left:0%; background-color: #000000; background-color: rgba(0,0,0,0.6); width:100%; }

#homevisual img { width:100%; }
#homevisual #homeregisterfloat2 { margin-top:-330px; height:310px; }

#homeaboutfloat h2 { color: #CC6600; }
#homeaboutfloat p, #homeaboutfloat .p { color: #A19E9E; }
#footer, #mobilefooter { background-color: #222223; padding-top:40px; padding-bottom:30px; margin-top:1px; }
#footer .copy, #mobilefooter .copy { font-size:105%; color: #CC6600; }
#footer p a, #mobilefooter p a { color: #A19E9E; }
#footerspace { display:none; }

#homeaboutfloat p, #footer p { font-size:110%; }
#homeaboutfloat .p { font-size: 1.1em; font-family: 'Roboto', sans-serif; font-weight: normal; margin-bottom: 10px; }
#homevisual p, #homeregisterfloat p { margin-top:30px; }

.regbutton {
  color:#ffffff;
  background-color:#CC6600;
  padding:5px 10px 5px 10px;
  font-size:200%;
  font-weight:bold;
  border-top-right-radius: 5px;
   border-top-left-radius: 5px;
  border-bottom-right-radius: 5px;
   border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
   border-bottom-left-radius: 5px;
  border-bottom-left-radius: 5px;
   border-top-left-radius: 5px;
}
.regbutton:hover { background-color:#AA4400; text-decoration:none; }

.orange, a { color: #CC6600; }
.red { color: #FFFF00; }
.error { color: red; }
a:hover { color:#ECECED; }

.col1 { float:left;width:35%;margin-left:10%;margin-right:5%; }
.col2 { float:left;width:44%;margin-left:5%;margin-right:0; }
.col1of3 { float:left;width:20%;margin-left:10%;margin-right:5%; }
.col2of3 { float:left;width:20%;margin-left:5%;margin-right:5%; }
.col3of3 { float:left;width:20%;margin-left:5%;margin-right:0; }
.colright { margin-left:55%;margin-right:0; }
.clear { clear:both; }

table.fx { background-color:rgba(50,50,50,0.8); }
table.fx tr { border-bottom: 1px solid #000000; }
table.fx tr th { background-color: #444444; }
table.fx tr th, table.fx tr td { padding:5px 10px; }
.fxheading { font-family: 'Oswald', sans-serif; font-size:180%; color:#CC6600; padding-bottom:5px; padding-bottom:5px; }
.fxbg { height:3px; line-height:1px; }
p[align="right"] {
  margin:10px 0 10px 0;
}
p[align="right"] a {
  color:#ffffff;
  background-color:#CC6600;
  margin:5px 0 5px 0;
  padding:5px 10px 5px 10px;
  font-size:150%;
  font-weight:bold;
  border-top-right-radius: 5px;
   border-top-left-radius: 5px;
  border-bottom-right-radius: 5px;
   border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
   border-bottom-left-radius: 5px;
  border-bottom-left-radius: 5px;
   border-top-left-radius: 5px;
}
p[align="right"] a:hover { background-color:#AA4400; text-decoration:none; }
.fx input[type="text"], .fx input[type="password"] { width:100%; }
input[type="text"], input[type="password"], textarea, select, select option { color:#000000; }



body { xxheight: 100vh; background-attachment: fixed; background-position: center center; background-size: cover; background-image: url('../img/2024/visual1.jpg'); }
#main { background-color: #000000; background-color: rgba(0,0,0,0.85); margin:100px 10% 20px 10%; padding:20px; font-size:110%; color:#999999; }



@media only screen
and (max-width : 625px) {
	.col1, .col2 { float:left;width:98%;margin-left:1%;margin-right:1%; }
	.col1of3, .col2of3, .col3of3 { float:left;width:98%;margin-left:1%;margin-right:1%; }
	.colright { margin-left:1%;margin-right:1%; }
}

@media
  /* ----------- iPhone 4 and 4S ----------- */
  only screen
  and (min-device-width: 320px)
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2),
  /* ----------- iPhone 5 and 5S ----------- */
  only screen
  and (min-device-width: 320px)
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2),
  /* ----------- iPhone 6 ----------- */
  only screen
  and (min-device-width: 375px)
  and (max-device-width: 667px)
  and (-webkit-min-device-pixel-ratio: 2),
  /* ----------- iPhone 6+ ----------- */
  only screen
  and (min-device-width: 414px)
  and (max-device-width: 736px)
  and (-webkit-min-device-pixel-ratio: 3),
  /* ----------- iPad mini ----------- */
  only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (-webkit-min-device-pixel-ratio: 1),
  /* ----------- iPad 1 and 2 ----------- */
  only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (-webkit-min-device-pixel-ratio: 1),
  /* ----------- iPad 3 and 4 ----------- */
  only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (-webkit-min-device-pixel-ratio: 2) {
	#homeparallax div {
		background-attachment: scroll;
	}
}

@media
  /* ----------- iPhone 4 and 4S ----------- */
  only screen
  and (min-device-width: 320px)
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2),
  /* ----------- iPhone 5 and 5S ----------- */
  only screen
  and (min-device-width: 320px)
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2),
  /* ----------- iPhone 6 ----------- */
  only screen
  and (min-device-width: 375px)
  and (max-device-width: 667px)
  and (-webkit-min-device-pixel-ratio: 2),
  /* ----------- iPhone 6+ ----------- */
  only screen
  and (min-device-width: 414px)
  and (max-device-width: 736px)
  and (-webkit-min-device-pixel-ratio: 3) {
	#homebackground img, #homeloginform { top:15%; }
	#homeloginform { top:15%; left:0;right:0;width:100%;margin:0; }
	#homeregisterfloat { top: 20%; }
	xx#homeregisterfloat h1, xx.regbutton { font-size: 100%; }
	#homeaboutfloat { top:auto; bottom:0; }
	#homeaboutfloat h2, #homeaboutfloat p { font-size:75%; }
}

.smallscreen #homebackground img, .smallscreen #homeloginform { top:15%; }
.smallscreen #homeloginform { top:15%; left:0;right:0;width:100%;margin:0; }
.smallscreen #homeregisterfloat { top: 20%; }
.smallscreen #homeaboutfloat { top: auto; bottom:0; background-color: rgba(0,0,0,0.8); }
#homeloginform.maxsize { margin-left: -200px; width: 400px; }
#footer.dockbottom { position:absolute;bottom:0;top:auto;width:100%; }

.tinyscreen #header .login p { font-size:100%; }
.tinyscreen .regbutton { font-size:100%; }
.tinyscreen #homeaboutfloat h1, .tinyscreen #homeaboutfloat p { font-size:80%; line-height:100%; margin-top:0; margin-bottom:0; }
.tinyscreen p, .tinyscreen h1, .tinyscreen h2, .tinyscreen h3 { font-size:100%; }
.tinyscreen #homeregisterfloat { margin-top:35px; }
.tinyscreen #homeregisterfloat p { margin-top:5px; }
.tinyscreen #homeloginform form { padding:5px; }
.tinyscreen #homeloginform form, .tinyscreen #homeloginform form .btn-default { font-size:80%; }
.tinyscreen #homeloginform form .form-group { margin-bottom:0; }
.tinyscreen #homebackground img, .tinyscreen #homeloginform { top:0; }
.tinyscreen #footer p { font-size:90%; }

.mobilescreen #homevisual2 { display:none; }
.mobilescreen #homevisual3 { display:none; }
.mobilescreen #homeusercount { display:none; }
.mobilescreen #homevisual { display:none; }
.mobilescreen #homeaboutfloat { display:none !important; }
.mobilescreen #homeparallax div { background-attachment: scroll; }
.mobilescreen #homeregisterfloat { position:absolute !important; top:110px !important; margin-top:0px !important; }


.mobilevisual { height: 100vh; background-attachment: fixed; background-position: center center; -webkit-background-size: 100%; -moz-background-size: 100%; -o-background-size: 100%; background-size: 100%; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-image: url('../img/2024/visual1b.jpg'); width:100%; }
.mobilelogobg { position:fixed; top:0px;left:0px;right:0px;height:70px; text-align:center; background-color:#000000; }
.mobilelogo { position:fixed; top:10px;left:30%;right:30%;height:50px; text-align:center; }
.mobilelogo img { xxxwidth:100%; width:150px; }

.mobileregister { position:fixed; max-width:100%; bottom:40px; left:0; right:0; height: 40px; padding-top:8px; font-size:24px; line-height:24px; text-align:center; text-decoration:none; text-transform:uppercase; font-weight: bold; background-color:#CC6600; overflow:hidden; }
.tinyscreen .mobileregister { font-size:20px; }
.mobilelogin { position:fixed; max-width:100%; bottom:0; left:0; right:0; height: 40px; padding-top:8px; font-size:24px; line-height:24px; text-align:center; text-decoration:none; text-transform:uppercase; font-weight: bold; background-color:#000000; overflow:hidden; }
.mobileimprint { position:fixed; right:3px; bottom:100px; opacity: 0.50; filter: alpha(opacity=50); }
.mobileprivacy { position:fixed; right:3px; bottom:80px; opacity: 0.50; filter: alpha(opacity=50); }
.mobileregister a, .mobilelogin a, .mobileimprint a, .mobileprivacy a { color:#ffffff !important; cursor:pointer; text-decoration: none; }


.desktopversion { display: block; }
.mobileversion { display:none; }

.tinyscreen .desktopversion, .smallscreen .desktopversion, .mobilescreen .desktopversion,
.tinyscreen #footer, .smallscreen #footer, .mobilescreen #footer,
.tinyscreen #footerspace, .smallscreen #footerspace, .mobilescreen #footerspace { display: none !important; }
.tinyscreen .mobileversion, .smallscreen .mobileversion, .mobilescreen .mobileversion { display:block !important; }

@media only screen and (max-device-width: 768px) {
	.desktopversion, #footer, #footerspace { display: none !important; }
	.mobileversion { display:block !important; }
}