@import "../css/fontawesome-all.css";

*,*:before, *:after {padding:0px;}

html, body, main, a,abbr,acronym,address,applet,article,aside,audio,b,blockquote,big,center,canvas,caption,cite,code,command,datalist,dd,del,details,dfn,dl,div,dt,em,embed,fieldset,figcaption,figure,font,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,i,iframe,img,ins,kbd,keygen,label,legend,li,meter,nav,object,ol,output,p,pre,progress,q,s,samp,section,small,span,source,strike,strong,sub,sup,table,tbody,tfoot,thead,th,tr,td,video,tt,u,ul,var{
    margin: 0px;
    padding: 0px;
    border: 0px solid #dedede;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}

body{
	background-color: ;
	background:url() 50% 0 no-repeat fixed;
    background:#111;
	/*
	background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
				linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
				linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
	*/
	background-size:			cover;
	background-attachment:		fixed;

	font-family:Tahoma, Geneva, sans-serif;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	line-height:19px;
	color:#B5B5B5;
	width:						100%;
	height: 					100%;
	overflow-y:					scroll;
	overflow-x:					hidden;
	overflow-wrap:				break-word;
	display: 					flex;
	flex-direction: 			column;
	z-index:1;
}

.breiten_weiche{margin-left:auto;margin-right:auto;width:100%;}
@media (min-width: 480px) {
.breiten_weiche{margin-left:auto;margin-right:auto;width:100%;}
}
@media ( min-width: 720px ) {  /** Größerer Viewport: Tablett **/
.breiten_weiche{margin-left:auto;margin-right:auto;width:100%;}
}
@media ( min-width: 900px ) { /** Großer Viewport: Browserfenster **/
.breiten_weiche{margin-left:auto;margin-right:auto;width:1100px;}
}

ol, ul {list-style:none;}
blockquote, q {quotes:none;}
table, table td {padding:0;border-collapse:collapse;}
img {vertical-align:middle;}
embed {vertical-align:top;}
input[type=text], textarea{ outline:none;}

article,aside,audio,canvas,command,datalist,details,embed,figcaption,figure,footer,header,hgroup,keygen,meter,nav,output,progress,section,source,video{display:block;}

mark,rp,rt,ruby,summary,time{display:inline;z-index:200;}

header{width:100%;float:left;flex:0 0 auto;}

nav{display:flex;flex: 0 0 auto;width:100%;margin:0px;padding:0px;z-index:200;}

main{height:auto;flex: 1 0 auto;}

.content{display: flex;
	width:100%;
	flex-wrap: wrap;
	flex:auto;
	flex-direction: row;
	justify-content: stretch;
	align-items: stretch;
	align-content: stretch;
	}

section{flex: 0 1 auto;padding:0px;}

/*********************************header*************************************/
header {padding:12px 0 3px 0; overflow:hidden;}
header h1{width:229px; float:left;}
header h1 a {display:block;width:440px;height:103px;background:url(../images/template/logo/logoxmas.png) 0 0 no-repeat; text-decoration:none; text-indent:-9999px; outline:none; text-decoration:none; }
header .soc{float:right; overflow:hidden; padding:5px 38px 5px 5px;}
header .soc a{ display:inline-block; padding:2px 0 4px 24px;font-size: 12px; line-height: 21px; font-weight: bold; color: white;}
header .soc a:hover{ color: #FF2F2F;}
/*********************************header*************************************/


/********************************* header flaggen menü *************************************/
/********************************* header flaggen menü *************************************/
/********************************* header flaggen menü *************************************/
#choose_lang {position:absolute; top:13px; right: 13px; width: 120px;}
#choose_lang #msdrpdd20_child {width:99%}

/********************************* header flaggen menü *************************************/
/********************************* header flaggen menü *************************************/
/********************************* header flaggen menü *************************************/






/*********************************Hauptmenü*************************************/
#menu {
display:block;
border-top: 1px solid #2d2d2d;
border-bottom: 1px solid red;
border-left: 1px solid #282828;
border-right: 1px solid #282828;
background: #000;
color: #FFF;
width:100%;
height: 60px;
	margin: 0px;
	padding: 0px;
	cursor: pointer;
}

#menu ul, #menu li {
	margin: 0px;
	padding: 0px;
	list-style: none;
}
#menu ul {
	width: 100%;
}
#menu li {
	float: left;
	display: inline;
	position: relative;
	
}

#menu a {
	display: block;
	line-height: 58px;
	padding: 0 10px;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 16px;
	text-transform: capitalize;
}
#menu a.dropdown-arrow:after {
	margin-left: 5px;
	display:block;
}
#menu i {
	display: inline;
	line-height: 58px;
	padding: 0 14px;
	text-decoration: none;
	text-transform: capitalize;
}
#menu li a:hover {
	color: green;
}
#menu li .nonehome {
	display: none;
}
#menu input {
	display: none;
	margin: 0px;
	padding: 0px;
	height: 60px;
	width: 100%;
	opacity: 0;
	cursor: pointer
}
#menu label {
	display: none;
	line-height: 60px;
	text-align: center;
	position: absolute;
	left: 35px
}
#menu label:before {
	font-size: 5.6em;
	content: "\2261"; 
	margin-left: 20px;
}
#menu ul.sub-menus{
	height: auto;
	overflow: hidden;
	width: 250px;
	background: #000000;
	position: absolute;
	z-index: 99;
	display: none;
}
#menu ul.sub-menus li {
	display: block;
	width: 100%;
	border-bottom:1px solid green;
}
#menu ul.sub-menus a {
	color: #FFFFFF;
	font-size: 16px;
	text-transform: capitalize;
}
#menu li:hover ul.sub-menus {
	display: block;
}
#menu ul.sub-menus a:hover{
	color: red;
}

@media only screen and ( max-width: 720px ) { /** Großer Viewport: Browserfenster **/
	#menu {position:relative;}
	#menu ul {background:#000;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none;}
	#menu ul.sub-menus{width:100%;position:static;}
	#menu ul.sub-menus a {padding-left:20px;}
	#menu li {display:block;float:none;width:auto;}
	#menu li .nonehome {display: inline-block;}
	#menu input, #menu label {position:absolute;top:0;left:0;display:block;}
	#menu input {z-index:4;}
	#menu input:checked + label {color:white;}
	#menu input:checked + label:before {}
	#menu input:checked ~ ul {display:block;}
	#menu a.dropdown-arrow:hover {
	margin-left: 5px;
	display:block;
	}
}

/*********************************Hauptmenü*************************************/


/*********************************Content Loyout Layer 3*************************************/
.ulp_menu{               /** Kleiner Viewport: Handy **/
	display: flex;
	flex-direction: column;
    padding: 0px;
    list-style-type: none;
}
.ulp_menuli {
    width: 100%;
}
.ulp_menuli_w50{
	width:100%;
}	

@media ( min-width: 720px ) {  /** Größerer Viewport: Tablett **/
.ulp_menu{
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
    padding: 0px;
    list-style-type: none;
}	
.ulp_menuli {
    width: 50%;
}
.ulp_menuli_w50 {
    width: 50%;
}	
}

@media ( min-width: 900px ) { /** Großer Viewport: Browserfenster **/
.ulp_menu{
	display: flex;
	flex-direction: row;
    padding: 0px;
    list-style-type: none;
}
.ulp_menuli {
    width: 33.33333%;
}
.ulp_menuli_w50 {
    width: 50%;
}
}



.divp_menu{
    font-size: 1.1em;
    color: white;
    width: 100%;
    height: 100%;
    text-decoration: none;
    display: flex;
    flex-direction: row;
    justify-content: center;
    box-sizing: border-box;
    text-align: center;
	border:solid 1px gray;
}
.divp_menu_spalte{flex-direction:column;border:0px solid #fff; justify-content: left; align-items: center;}
/*********************************Content Loyout Layer 3*************************************/

.vp_menu{margin:0px;padding:0px;display: flex;flex-direction:column;width:100%;}
.vp_menu_li{margin:0px;padding:0px;list-style-type: none; justify-content: center; align-items: center;}
.vp_menu_li a{flex-direction:row;margin:10px;}

/****************************footer************************/
footer {background:none;}
footer .nav{ overflow:hidden;margin: 0 0 4px 2px;}
footer .nav a{font-size: 14px; line-height: 18px; color:#807e7e; font-weight:bold;}
footer .nav a:hover, footer .nav li.current a{ color:#FFFFFF;}
footer .nav li{ float:left; margin-right:17px;}
footer a {font-size: 125%;}
.footer_styles {
  background-color: #000;
	padding:20px;
}
/****************************footer************************/


/**************************** content box ************************/
/**************************** content box ************************/
/**************************** content box ************************/
.cswitch{margin:0px;padding:0px;width:100%;}
<!--.cswitch:nth-child(odd){background-color: rgba(255, 255, 255, 0.16);}
.cswitch:nth-child(even){background-color: rgba(255, 255, 255, 0.1);}-->
.cswitch:nth-child(odd){background-color: rgba(0, 0, 0, 0.7);}
.cswitch:nth-child(even){background-color: rgba(0, 0, 0, 0.8);}

.box{display:block;padding:30px 20px 30px 20px;z-index:10;}
.box{ overflow-x: hidden;}
.box10{display:block;padding:30px 0px 30px 0px;}
.boxing{display:block;}
.box_gray_border{margin:0px;padding:0px;border-bottom:1px solid gray;}
.box_gray_border_full{margin:0px;padding:0px;border:2px solid gray;}
.box_red{margin:0px;padding:0px;border-top:4px dotted red; border-bottom:4px dotted red;}
.c_box_abstand{margin-bottom:10px;}
.c_box_planeten_info{display:flex;flex-direction:row;-background-color: rgba(180, 119, 155, 0.4);border:1px solid #999;width:100%; justify-content: center; align-items: flex-start;}
.c_box_planeten_spalte{flex-direction:column;border:0px solid #fff; justify-content: center; align-items: center;}
.c_box_padi{padding:5px;}
.c_box_padi10{padding:10px;}
.c_box_center{justify-content: center; align-items: center;}

.bo0{border-top:1px solid gray;}
.bo1{border-bottom:1px solid gray;}
.bo1h{padding-bottom:1px;}
.bo2{border-left:1px solid gray;border-right:1px solid gray;}
.bo3{border-top:1px solid gray;border-left:1px solid gray;border-right:1px solid gray;}
.bo4{border:1px solid gray;}

.bk{display:flex;flex-direction:row;align-items: center;justify-content: center;padding:5px 5px 5px 5px;}
.bkl{display:flex;flex-direction:row;align-items: center;justify-content: flex-start;padding:5px 5px 5px 5px;}
.ibr{display:block;text-align:right;}
.ib{display:block;text-align:center;}
.ibl{display:block;text-align:left;}
.ibm{display:block;text-align:left;padding-left:20px;}
/**************************** content box ************************/
/**************************** content box ************************/
/**************************** content box ************************/


/********************************* Box Höhe **********************************/
.hp10{height:10px;}.hp20{height:20px;}.hp25{height:25px;}.hp30{height:30px;}.hp40{height:40px;}
.hp50{height:50px;}.hp60{height:60px;}.hp100{height:100px;}.hp104{height:104px;}
/********************************* Box Höhe **********************************/


/********************************* Box Breite **********************************/
.wauto{width:auto;}.w5{width:5%;}.w10{width:10%;}.w15{width:15%;}.w20{width:20%;}.w25{width:25%;}.w30{width:30%;}.w33{width:33%;}
.w35{width:35%;}.w40{width:40%;}.w50{width:50%;}.w60{width:60%;}.w70{width:70%;}.w80{width:80%;}.w90{width:90%;}.w100{width:100%;}
/********************************* Box Breite **********************************/


/********************************* Box Ausenabstand **********************************/
.m10{margin-top:10px;}
.m20{margin-top:20px;}
/********************************* Box Ausenabstand **********************************/


/*********************************CLASSES**********************************/
.f_left {float:left}
.f_right {float:right}
.clear {clear:both;width:100%;line-height:0;font-size:0;}

.block{ display:block;}
.inline-block{ display:inline-block;}
.inone{display:inline-block;}
.none{display:none;}
.hidden{display:none;}

.align_right {text-align:right}
.align_center {text-align:center}
.align_justify {text-align:justify}
/*********************************CLASSES**********************************/


/********************************* Hintergrund Bilder oder Farben **********************************/
.bg1{ background-color: rgba(0, 0, 0, 0.8);font-weight:bold;font-size:1.1em;color:white;letter-spacing: 1px;}
.bg2{ background-color: rgba(0, 0, 0, 0.7);font-weight:bold;font-size:1.1em;color:white;letter-spacing: 1px;}
.cont_bg1{ background-color: rgba(0, 0, 0, 0.6); border-bottom:1px solid green;}
.cont_bg2{ background:url(../images/template/bg/content_bg2.png) repeat;}
.cont_bg3{ background:url(../images/template/bg/content_bg3.jpg) no-repeat;}
.cont_bg4{ background:url(../images/template/bg/content_bg4.png) no-repeat;}
.cont_bg5{ background:pink; background:url(../images/template/bg/content_bg5.png) 0 0px no-repeat;}
.bgblack{background:black;}
<!--.bg_gray{background-color: rgba(255, 255, 255, 0.14);}-->
.bg_gray{background-color: rgba(0, 0, 0, 0.8);}
.bg_red{background:red;}
.aclink:hover{background:green;}
.ac{
  font-weight: bold;
  padding-right: 20px;
}

/********************************* Hintergrund Bilder oder Farben **********************************/


/********************************* Text Farben **********************************/
.c_red{color:red;}
.c_green{color:green;}
.c_blue{color:blue;}
.c_yellow{color:yellow;}
/********************************* Text Farben **********************************/


/*================================>> H <<========================================*/
h3 { color: #FFFFFF;font-size: 14px;font-weight: 600;padding: 10px 0px 10px 0px;}
h1,h2,h3,h4{display:inline;text-decoration: none;letter-spacing: 2px;}
h3.h3center{display:inline;align-items: center;justify-content: center;vertical-align:middle;}
h4{ font-weight:normal; color: #FFFFFF;padding: 5px 0px 5px 0px;}
h2{color:#fff; font-size:20px;font-weight:bold; text-transform:uppercase; z-index:0;}
h2 a{color:#2f9dbe;}
h2 a:hover{ color:#FFFFFF;}
/*================================>> H <<========================================*/


/********************************* Buttons Inputs *************************************/
select option {background-color: #111;}
select,options,input{
	padding:5px;
      border: 1px solid #111;
      border-radius: 3px;
      overflow: hidden;
      background-color: rgba(100, 100, 100, 0.5);
      color: #fff;
}
input:focus:-moz-placeholder { color: transparent !important;}
input[type="number"] { width: 3rem; } /* Fix for Firefox 29+ */
input.login{width:120px;font-size:12px; border:1px solid #282828; color:#5a5959;color:#fff; outline:none;background:#222 !important;}

p {margin-bottom:18px;padding:10px;}

a, .hyperlink {color:white;outline:none; text-decoration:none; cursor:pointer;}

button.button, input[type="submit"].button { display:inline-block; padding:1px 7px 3px 6px;border: 1px solid #282828; margin: 13px 0 0 1px; font-size: 12px; line-height: 18px; color:#fff; background: url(../grafiken/images/button.jpg) repeat-x;}
button.button:hover, input[type="submit"].button:hover{ background-position: 0 bottom; color:#2f9dbe;}

button.button, input[type="submit"].button, .comments{-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;}


button.bigbutton, input[type="submit"].bigbutton { padding: 10px 18px 10px 18px; font-weight: bold; font-size: 130% !important;}

button.bigbuttongreen, input[type="button"].bigbuttongreen,input[type="submit"].bigbuttongreen {display: inline-block;
padding: 1px 7px 3px 6px;
border: 1px solid #282828;
margin: 0px 0px 0px 0px;
font-size: 12px;
line-height: 18px;
color: #fff;
background:green; color:white;padding: 10px 18px 10px 18px; font-weight: bold; font-size: 130% !important;}
[type="button"].bigbuttongreen:hover,.bigbuttongreen[type="submit"]:hover{background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);color:white;}

button.bigbuttonred, input[type="submit"].bigbuttonred {display: inline-block;
padding: 1px 7px 3px 6px;
border: 1px solid #282828;
margin: 0px 0px 0px 0px;
font-size: 12px;
line-height: 18px;
color: #fff;
background:darkred; color:white;padding: 10px 18px 10px 18px; font-weight: bold; font-size: 130% !important;}
.bigbuttonred[type="submit"]:hover{background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);color:white;}
/********************************* Buttons Inputs *************************************/


table,thead,tbody,tr,th,td{border:1px solid gray;}
.zindex10{z-index:10;}
.zindex100{z-index:100;}
.ml10{padding:10px 10px 10px 10px;}
.fs12{font-size:12px;}
.mächtig{border:5px solid red;color:red;font-weight:bold;}
.first{ margin-bottom:10px !important;}
.small{font-size:13px;}
.ai_base {align-items: baseline;}

.phh3{padding:10px 0px 0px 0px;font-size:16px;font-weight:bold;line-height:30px;border-bottom:2px solid gray;}
div.ph3{display:block;padding:10px 0px 0px 0px;font-size:14px;font-weight:bold;vertical-align:middle;}

#error{display:block; background-color: black; color: red; text-align: center;}
.message-text{background:darkred;background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);padding:25px;}

.fixed_check:before {
   font-family: "Font Awesome 5 Free";
   content: "\f00c";
   color:green; 
   display: inline-block;
   padding-right: 3px;
   vertical-align: middle;
   font-weight: 900;
}
.bug_check:before {
   font-family: "Font Awesome 5 Free";
   content: "\f188";
   color:red; 
   display: inline-block;
   padding-right: 3px;
   vertical-align: middle;
   font-weight: 900;
}

@media screen and (max-width: 480px) {.SigHTML{max-width:100%;height: auto;}.SigHTML_e{max-width:100%;height: auto;}}
@media screen and (min-width: 480px) {.SigHTML{max-width:100%;height: auto;}.SigHTML_e{max-width:100%;height: auto;}}
@media ( min-width: 720px ) {  /** Größerer Viewport: Tablett **/.SigHTML{max-width:100%;height: auto;}.SigHTML_e{max-width:100%;height: auto;}}
@media ( min-width: 900px ) { /** Großer Viewport: Browserfenster **/.SigHTML{max-width:100%;height: auto;}.SigHTML_e{max-width:100%;height: auto;}}


/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: rgba(100, 100, 100, 0.1);
  color:#fff;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
  color:#fff;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: rgba(100, 100, 100, 0.3);
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: rgba(100, 100, 100, 0.5);
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}


.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: red;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: #222;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: green;
}

input:focus + .slider {
  box-shadow: 0 0 1px #888;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}    

button {
  background-color: rgba(0, 0, 0, 0);
  border-color: rgba(10, 20, 10, 1);
  border-width: 0px;
  color: white;
}