@font-face { font-family: "downlink"; src:url(font_downlink.otf) format("opentype"); }
html { background: url(../img/bg_keyboard_2.jpg) no-repeat center center fixed; background-size: cover; }
a:link, a:visited, a:hover, a:active { text-decoration: none; color: #000000 }
.header	{ padding: 5px;  margin-bottom: 10px; min-height: 300px; }
.content {display:flex; justify-content:space-between;background-color: #c0c0c0; color: #000000; padding-top: 25px;}
.div_left {width: 300px;padding: 5px; margin-bottom: 10px; border-right: 2px dotted #363636; padding-right: 20px; min-height: 400px; font-size: 15px;}
.div_center{width: 100%;margin: auto; border: 0px solid #ff0000; margin-bottom: 10px; min-height: 400px; }
.div_right {width: 200px;padding: 5px; margin-bottom: 10px; border-left:  2px dotted #363636; padding-left:  20px; min-height: 400px; font-size: 15px; }
hr.hr_design1 { border: 0; height: 3px; background: #5c9900; background-image: linear-gradient(to right, #000000, #ADFF2F, #c0c0c0); }
.hw_edit a { color: #000000 }
.suchbutton { color: #000000 }
.back-to-top { background:#ADFF2F; position: fixed; bottom:70px; right:20px; padding:13px; padding-left: 17px; height: 50px; width: 50px; box-sizing: border-box; border-radius: 25px; }

.back-to-top:hover { color: #ff0000; }
.footer		{ padding: 5px; clear: both; background-color: #ffffff; min-height: 0px; color: #000000; margin-top: 300px; padding-top: 60px; height: 130px;text-align: right;  }
.footer a { color: #000000; }
.right_img  { border: 1px double #000000;width:100%;max-width: 175px; }
.right_img.avatar { width: 30px;vertical-align: middle; }
.login, .login a { float: right; color: #ffffff; }
.login input[type=text], .login input[type=password] { font-size: 14px; font-family: downlink, arial, sans-serif;width: 100px; border: 1px solid #aaa; background-color: #F8F8F8;padding: 3px;margin: 3px;border: 0; }
.login input[type=submit] { width: 70px;height: 25px;border: 0;padding: 3px;margin: 3px; } 
.content_include {margin: auto; width: 80% ;min-height:1300px; }
.informationen { text-align: center; }
.logo_header { width: 200px; }
.table100 { width: 100% }
h1, h2, h3 { font-size: 18px;font-weight:normal; }
.fab { font-size:24px;}
.banner { height: 300px; width: 100% !important; object-fit: cover; object-position: 50% 50%; margin-bottom: -7px; }
.andern_button {  font-size: 14px;margin-left: -105px;margin-top: 260px;position: absolute;color: #ff0000; padding: 5px;border-radius: 5px;background-color: #c0c0c0; opacity: 0.2; transition: opacity .25s ease-in-out; }
.banner2:hover .andern_button { opacity: 1;transition: opacity .25s ease-in-out; }
body { font-size: 18px; color: #ffffff; padding: 0; margin: 0; font-family: downlink, arial, sans-serif; }
.alert { padding: 20px; background-color: #f44336; color: white; opacity: 1; transition: opacity 0.6s; margin-bottom: 15px; }
.alert.success { background-color: #4CAF50;}
.alert.info { background-color: #2196F3;}
.alert.warning { background-color: #ff9800;}
.closebtn { margin-left: 15px; color: white; font-weight: bold; float: right; font-size: 22px; line-height: 20px; cursor: pointer; transition: 0.3s; }
.closebtn:hover { color: black; }
table { width: 100%; }
table td, table th { padding: 2px 10px; border: 0px; height: 40px; vertical-align: middle; text-align: center;  }
table th { color: #000000; }
table tr:nth-child(1n) { background-color: #ADFF2F; color: #000000; }
table tr:nth-child(2n) { background-color: #fff5dd; color: #000000; }
.statistik td { background-color: #FFF5DD; color: #000000; }
 .statistik td a { color: #000000;text-decoration: underline; }

nav { display: none; }

.button {transition: all 0.5s; background-color: #ADFF2F; border: none; color: #000000; text-align: left; font-size: 14px; padding: 10px; cursor: pointer; width: 100%; font-family: downlink; margin-bottom: 10px; }
.button:hover { background-color: #ff0000; }
.button.deak { background-color: #808080; }
.hw_standardbild { margin-top: 40px;text-align: center;background-color: #FFF5DD;position: absolute; }
.sr_username { text-align: center; }
.sr_pc_img { width: 100%;padding-top:5px;max-width: 175px; }
.suche { margin-top: -1px;background-color: #ADFF2F;cursor: pointer; }
.form .input_suche { margin: 0;width: 100%; }
.home_right_img { max-width: 175px;width: 173px;background-color: #ffffff }
.form input, .form textarea, .form select { height: 50px; border: 1px solid #dee0e4; margin-bottom: 20px; padding: 0px 10px; margin: 10px; width: calc(100% - 30px); font-family: downlink; background: rgba(255, 255, 255, 0.7);}
.form select { margin-left: 10px; width: calc(100% - 10px); }
.form textarea { margin-left: 5px; height: 120px; }
.bild_hw { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; }
.bild_hw + label { padding-left: 5px; padding-top: 5px; position: absolute; float:left; font-weight:normal; }
.bild_hw:focus + label, .bild_hw + label:hover { color: #ff0000; opacity: 1;transition: opacity .25s ease-in-out; }
.bild_hw + label { cursor: pointer; }
.bild_hw:focus + label { outline: 1px dotted #000; outline: -webkit-focus-ring-color auto 5px; }
* { box-sizing: border-box; }
.column { float: left; width: 33.33%; padding: 10px; height: 300px; }
.pseudotable.row { height: 50px;border-bottom: 1px dotted #c0c0c0; }
.pseudotable.row.beschreibung { height: 140px;overflow: auto; }
.pseudotable.row.discord { padding: 0; }
.column div { padding: 8px; } 
.columnbox1 { width: 20%; background-color:#ADFF2F;text-align: center; align-items: center; display: flex; justify-content: center;color: #000000; }
.columnbox2 { width: 25%; background-color:#FFF5DD;  }
.columnbox3 { width: 55%; background-color:#FFF5DD; }
.columnbox3 a, .columnbox2 a { color: #000000; }


.tooltip2 { position: relative; display: inline-block; border-bottom: 1px dotted black; }
.tooltip2 .tooltiptext2 { visibility:hidden; width:100%; background-color:#ADFF2F; color:#000000; text-align:center; padding:5px 0; position:absolute; z-index:2; top:67px; left:0%; border-top: 1px solid #ffffff; border-bottom: 1px solid #ffffff; }
.tooltip2:hover .tooltiptext2 { visibility: visible; }	

.hw_edit2 { text-align: center;padding-top: 2px;position: absolute;margin-top: -200px;width:25px;text-align:center;
background-color: #0037ff;padding-bottom: 5px; opacity: 0.5; transition: opacity .25s ease-in-out; color: #ffffff }
.hw_edit2:hover  { opacity: 1;transition: opacity .25s ease-in-out; }
.hw_edit2 a { color: #ffffff; }
.hw_edit2 a:hover { color: #ff0000; }

.hw_edit3 { position: absolute;z-index: 1;background-color: #ADFF2F;padding-bottom: 5px; opacity: 0.5; transition: opacity .25s ease-in-out; color: #000000;padding: 5px; }
.hw_edit3:hover  { opacity: 1;transition: opacity .25s ease-in-out; }
.hw_edit3 a { color: #000000 }
.hw_edit3 a:hover { color: #ff0000; }

/* PN */
#pn_window{ position:fixed; display: none; width: 300px;height: 380px;border:1px solid #ccc;right: 150px;bottom: 0px; border-radius: 10px 10px 0 0; z-index: 1000; background-color: #FFF5DD; }
#pn_window.hide { height: 25px; }
#pn_window .pn_username { width: 299px;height: 32px; padding: 5px;background: #ADFF2F;border-radius: 10px 10px 0 0;color: #000000; }
.pn_username { cursor: pointer; }
#pn_container{ width:299px; margin:0 auto; }
#chat-container{ width: 299px;height: 300px;padding: 5px; overflow-y: scroll; transform: rotate(180deg);direction: rtl; }
.message{ padding: 5px; clear: both; color: #000000; text-align: center; transform:rotate(180deg);direction: ltr; }
.message .time{ font-size: 10px;font-style: italic; }
.message .pn_convers{ display: block; text-align: left; width: 220px;padding: 5px; font-size: 14px; }
.message .fro{ margin: 5px 0 0 -5px; background: #c0c0c0;border-radius: 10px 10px 10px 0;color: #000000; }
.message .me{ color: #fff; margin: 5px 0 0 55px; background: blue;border-radius: 10px 10px 0 10px; }
textarea{ width: 250px; height: 40px; resize: none; border: none; background: rgba(255, 255, 255, 0.7); }
textarea:focus,textarea:active{ outline: 0 none; }
.pn_close{ width: 20px; float: right; padding: 4px;margin: -30px 5px 0 0;color: #000000; cursor: pointer; }
.senden { width: 40px;height: 40px; color: #000000;	}
#none { height: 0;width: 0;display: none; }


	.hw_links{
		margin-right: 150px;
		text-align:left;
		width:30%;
		padding: 5px;
	}
	.hw_rechts{
		float: right;
		text-align: left;
		width:70%;
		padding: 5px;
	}
	
	
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #ffffff; }
::-webkit-scrollbar-thumb { background: #ADFF2F; }
::-webkit-scrollbar-thumb:hover { background: #555; }	

.green { background-color:#FFF5DD; color: #000000;}
.userfarbe { background-color:#ADFF2F;color: #000000; }
.userfarbe a { color: #000000; }
.row:after { content: ""; display: table; clear: both; }
.ui-draggable, .ui-droppable { background-position: top; }
input[type=radio] { width: 20px; height: 20px; border: 1px solid #dee0e4; font-family: downlink; background: rgba(255, 255, 255, 0.7); }
.social_icons { margin-top: -100px; position: absolute; color: #ffffff; right: 10px }
.social_icons a { color: #ffffff; }
.social_icons a:hover { color: #4CAF50; }
.show_hw { position: absolute;color: #000000; }
.show_hw a { color: #000000; } 
.home_rnd_pc, .home_rnd_hw { width: 100%; object-fit:cover; display:block; height:200px; padding-top:0px; }
.home_rnd_right { margin-top: -4px; background-color: #ADFF2F; }
input[type=checkbox] { vertical-align: middle; width: 20px; height: 20px; border: 1px solid #dee0e4; font-family: downlink; background: rgba(255, 255, 255, 0.7); }
.tooltip { position: relative; display: inline-block; }
.tooltip .tooltiptext { visibility: hidden; width: 250px; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 5px; position: absolute; top: -55px; height: 55px; z-index: 1; bottom: 150%; left: 50%; margin-left: -75px; opacity: 0; transition: opacity 0.3s; }
.tooltip .tooltiptext::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent; }
.tooltip:hover .tooltiptext { visibility: visible; opacity: 1; }
:root { --card-margin: 1em; }
.container_sr { display: flex; flex-wrap: wrap;background-color: #FFF5DD }
.container_sr > * { flex: 1 1 calc(280px + var(--card-margin)); }
.card { display: flex; flex-wrap: wrap; margin: var(--card-margin); background-color: #ADFF2F; }
.card > * { flex: 1 1 280px; }
.content_sr { align-self: center; text-align: center; color: #000000; }
.media { transition: transform 1s, filter .5s ease-out;background-color: #ffffff; filter: grayscale(100%); }
.media:hover {  filter: grayscale(0%);opacity:1; }
.support_border { width: 100; padding: 20px; border: 6px solid #ADFF2F;text-align:center; }



.media_start:hover { transition: transform 1s, filter .5s ease-in;background-color: #ffffff; filter: grayscale(100%); }
.media_start {  filter: grayscale(0%);opacity:1; transition: transform 1s, filter .5s ease-in }




.start_daumen { color: #ffffff;opacity: 0.8; position: absolute; font-size: 50px;margin-top: -140px;color: white; text-shadow: 0px 1px 6px #ff0000; width: 100%;text-align:center; }
.start_daumen:hover .media {  filter: grayscale(0%);opacity:1; }
.hw_edit { position: absolute;margin-top: -248px;background-color: #ADFF2F;padding-bottom: 5px; opacity: 0.5; transition: opacity .25s ease-in-out; color: #000000 }
.hw_edit:hover  { opacity: 1;transition: opacity .25s ease-in-out; }
.media.empty, .card.empty { background: none; }	
.card .media img { width: 100%;object-fit: cover; display: block; height: 200px; padding-top:0px; }
input[type=submit] { text-align: center; background-color: #ADFF2F;height: 40px;padding: 0;margin: 0;max-width: 200px; }
.fancybox-slide--iframe .fancybox-content { width  : 800px; height : 600px; max-width  : 80%; max-height : 80%; margin: 0; }       
.it .btn-orange { background-color: blue; border-color: #777!important; color: #777; text-align: left; width:100%; }
.it .input.form-control { border:none; margin-bottom:0px; border-radius: 0px; border-bottom: 1px solid #ddd; box-shadow: none; }
.it .form-control:focus { border-color: #ff4d0d; box-shadow: none; outline: none; }
.fileUpload { position: relative; overflow: hidden; }
.fileUpload input.upload { position: absolute; top: 0; right: 0; margin: 0; padding: 0; font-size: 20px; cursor: pointer; opacity: 0; filter: alpha(opacity=0); }
   
.deak a:link, .deak a:visited, .deak a:hover, .deak a:active { background-color: #808080; }	
.nav ul > li > a > img { height: 30px; width: 30px; float: left; margin-top: -5px; padding-right: 5px; }
.nav ul { width: 100%; display: flex; flex-direction: column; padding-left: -40px; }
.nav ul > li { list-style: none; height: 50px; line-height: 20px; padding-bottom: 10px; margin-left: -24%; }
.nav ul > li > a {
  vertical-align: middle; display: block; width: 100%; height: 100%; padding-left: 5px; text-decoration: none; transition: all 0.5s; 
  background-color: #ADFF2F; color: #000000; text-align: left; cursor: pointer; font-family: downlink; padding-left: 15px; padding-top: 10px; }
ul > li > a:hover { background-color: #ff0000; }

   
@media screen and (max-width:700px) {
	.social_icons { margin-top: 0px;position: relative;color: #000000;right: 0px;padding: 5px;text-align: center;padding-bottom: 20px; }	
	.column { width: 100%; }
    .content{display: block;}
    .content_include { width:  calc(100% - 1px;); border: 1px solid #ff0000; }
    .div_left   { width: 100%; height: auto; padding: 0;margin: 0; border: 0; } 
    .div_right  {  width: 99%;  padding: 5px;margin: 0; border: 0; } 
    .div_center {  width: 100%;  padding: 5px;margin: 0; height: 100%; } 
    .content_include { width: 100%;min-height:1300px; padding: 0;margin: 0; border: 0; }
    .form input, .form textarea, .form select { height: 50px; border: 1px solid #dee0e4; margin-bottom: 20px; padding: 0px 10px; margin: 10px; width: calc(100% - 10px); font-family: downlink; background: rgba(255, 255, 255, 0.7); }
    .logo_header { width: 70%; text-align: right;margin-left: 70px; }
	table, tr, td { width: calc(100% - 10px); padding:0; margin:0; border:1px solid black; border:0; }
	thead { display:none; }
	input[type='radio'] { width: 20px; height: 20px; border: 1px solid #dee0e4; font-family: downlink; background: rgba(255, 255, 255, 0.7); }
    .button,.deak {background-color: #ADFF2F; border: none; color: #000000; text-align: center; font-size: 20px; padding: 10px; cursor: pointer; width: 90%; height:70px; font-family: downlink; margin: 5px; display: inline-block; }
    .footer	{ padding: 0px; clear: both; background-color: #ffffff; min-height: 0px; color: #000000; margin-top: 300px; padding-top: 60px; height: 130px;text-align: center; font-size: 14px;}
	.header { min-height: 250px; }


.navi_normal { display: none;  }
.nav ul > li { display: none; }
.nav ul > li > a { display: none;  }
.div_left { display: none; }


nav { display: block; }

#menuToggle
{
  display: block;
  position: absolute;
  top: 20px;
  left: 20px;
  
  z-index: 1;
  
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle a
{
  text-decoration: none;
  color: #232323;
  
  transition: color 0.3s ease;
}

#menuToggle a:hover
{
  color: tomato;
}


#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  
  cursor: pointer;
  
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  -webkit-touch-callout: none;
}

#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  
  background: #ADFF2F;
  border-radius: 3px;
  
  z-index: 1;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease; }
#menuToggle span:first-child { transform-origin: 0% 0%; }
#menuToggle span:nth-last-child(2) { transform-origin: 0% 100%; }
#menuToggle input:checked ~ span { opacity: 1; transform: rotate(45deg) translate(-2px, -1px); background: #232323; }
#menuToggle input:checked ~ span:nth-last-child(3) { opacity: 0; transform: rotate(0deg) scale(0.2, 0.2); }
#menuToggle input:checked ~ span:nth-last-child(2) { transform: rotate(-45deg) translate(0, -1px); }
#menu { position: absolute; width: 300px; margin: -100px 0 0 -50px; padding: 50px; padding-top: 125px; background: #FFF5DD; list-style-type: none; -webkit-font-smoothing: antialiased; transform-origin: 0% 0%; transform: translate(-100%, 0); transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0); }
#menu li { padding: 10px 0; font-size: 22px; }
#menuToggle input:checked ~ ul { transform: none; }



}