/*/////////////[ Basiseinstellungen für Index Start und Home ]////////////////////////////////////*/

html, div, span, p, a {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
 html {
	height: 100%;
}

* {
	margin: 0px; 
	padding: 0px; 
	box-sizing: border-box;
}

 body {
	height: 100%;
	padding-top:0px;
}


/*-------------  Wichtig: Generelle Einstellungen  ---------------------*/
button {
	outline: none !important;
	border: none;
	background: transparent;
}

button:hover {
	cursor: pointer;
}

input {
	outline: none;
	border: none;
}

input:focus {
  border-color: transparent !important;
}

input::-webkit-input-placeholder { color: #8f8fa1;}
input:-moz-placeholder { color: #8f8fa1;}
input::-moz-placeholder { color: #8f8fa1;}
input:-ms-input-placeholder { color: #8f8fa1;}

label {
  display: block;
  margin: 0;
}

a:focus {
	outline: none !important;
}

a:hover {
	text-decoration: none;
  color: #403866;
}

/*/////////////[ Ende Basiseinstellungen ]////////////////////////////////////*/

/*/////////////[ Input ]//////////////////////////////////////////////////////*/

.wrap-input100 {
  width: 100%;
  position: relative;
  background-color: #e6e6e6;
  border: 1px solid transparent;
  border-radius: 3px;
}

.input100 {
  font-family:"PT Sans";
  color: #403866;
  line-height: 1.2;
  font-size: 18px;
  display: block;
  width: 100%;
  background: transparent;
  height: 62px;
  padding: 0 20px 0 38px;
}

.txt1 {
  font-family:"PT Sans";
  font-size: 16px;
  color: #827ffe;
  line-height: 1.4;
}

.txt2 {
  font-family:"PT Sans Bold";
  font-size: 20px;
  color: #827ffe;
  line-height: 1.8;
}

.txt3 {
  font-family:"PT Sans Bold";
  color: #827ffe;
  line-height: 2.4;
  font-size: 20px;
}


/*===========[ Focus Input ]===============================================*/

.focus-input100 {
  position: absolute;
  display: block;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  top: -1px;
  left: -1px;
  pointer-events: none;
  border: 1px solid #827ffe;
  border-radius: 3px;
  visibility: hidden;
  opacity: 0;

  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
  -webkit-transform: scaleX(1.1) scaleY(1.3);
  -moz-transform: scaleX(1.1) scaleY(1.3);
  -ms-transform: scaleX(1.1) scaleY(1.3);
  -o-transform: scaleX(1.1) scaleY(1.3);
  transform: scaleX(1.1) scaleY(1.3);
}

.input100:focus + .focus-input100 {
  visibility: visible;
  opacity: 1;

  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}


/*===========[ Checkbox ]===============================================*/


.input-checkbox100 {
  display: none;
}

.label-checkbox100 {
  font-family:"PT Sans";
  font-size: 16px;
  color: #999999;
  line-height: 1.2;
  display: block;
  position: relative;
  padding-left: 26px;
  cursor: pointer;
}

/*===========[ Alert validate ]===============================================*/

.validate-input {
  position: relative;
}


/*/////////////[ Utility Flex-Box, Padding, Margin]//////////////////////////////////////////////////////*/

.p-t-3 {padding-top: 3px;}
.p-t-20 {padding-top: 20px;}
.p-b-5 {padding-bottom: 5px;}
.p-b-10 {padding-bottom: 10px;}
.p-b-24 {padding-bottom: 24px;}
.p-b-51 {padding-bottom: 51px;}
.p-l-20 {padding-left: 20px;}

.m-t-17 {margin-top: 17px;}
.m-b-16 {margin-bottom: 16px;}
.m-l-17 {margin-left: 17px;}

.w-full {width: 100%;}
.ta-center {text-align:center;}

.flex-sb-m {
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	justify-content: space-between;
	-ms-align-items: center;
	align-items: center;
}

.flex-sa-m {
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	justify-content: space-around;
	-ms-align-items: center;
	align-items: center;
}



/*//////////////////////// START CSS //////////////////////////////*/

/*========[ Form ]==========================================================*/

.login100-form-title {
    font-family:'PT Sans Bold';
  font-size: 30px;
  color: #403866;
  line-height: 1.2;
  text-transform: uppercase;
  text-align: center;
  width: 100%;
  display: block;
}

.login100-form-titleLower {
    font-family:'PT Sans Bold';
  font-size: 25px;
  color: #403866;
  line-height: 1.2;
  text-align: center;
  width: 100%;
  display: block;
}

.login100-form-btn {
  font-family:'PT Sans';
  font-size: 20px;
  color: #fff;
  line-height: 1.2;
  text-transform: uppercase;

  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  width: 100%;
  height: 50px;
  background-color: #827ffe;
  border-radius: 3px;
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}

.login100-form-btn:hover {
  background-color: #403866;
  color: #fff;
}

.login50-form-btn {
  font-family:'PT Sans';
  font-size: 20px;
  color: #fff;
  line-height: 1.2;
  text-transform: uppercase;

  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  width: 100%;
  height: 50px;
  background-color: #827ffe;
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}

.b-radius {
  border-radius: 3px;
}

.b-radius-left {
  border-radius: 3px 0px 0px 3px;
}

.b-radius-right {
  border-radius: 0px 3px 3px 0px;
}


.login50-form-btn:hover {
  background-color: #403866;
  color: #fff;
}

/*  Close Button */

.closePers {
  position: absolute;
  top: 15px;
  right: 25px;
  height: 30px;
  width: 30px;
  background-image: url('/assets/svg/close-24S.svg');
  background-size: contain;
  z-index:7;
}

.closePers:hover,
.closePers:focus {
  background-color: #827ffe;
  background-image: url('/assets/svg/close-24SW.svg');
  text-decoration: none;
  cursor: pointer;
}



/*/////////////[ Error Msg INDEX.php Login Form  ]//////////////////////////////////////////////////////*/

.error {
  font-family:"PT Sans Bold";
  color: #827ffe;
  line-height: 2.4;
  font-size: 20px;
  text-align:center;
}

#chg_color {
  color: red;
  animation: mymove 3s infinite;
}

@keyframes mymove {
  50% {color: blue;}
}

/*/////////////[  Nav Bar INDEX.php START.php  ]//////////////////////////////////////////////////////*/


.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  background-color: transparent !important;
  border-color: transparent !important;
  position: fixed;
  z-index: 900;
  top: 0;
  width: 100%;
}

.navbar_start {
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  background-color: transparent !important; 
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  position: fixed;
  z-index: 20;
  top: 0;
  width: 100%;
  height: 60px;
}

.navbar_start > .list {
    color: rgba(119, 136, 153, 0.6);
}

.list {
    font-family: 'Open Sans SemiBold', sans-serif;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    padding-left:30px;
    padding-right:30px;
    padding-top:0px;
}

.list-big {
    font-size:calc(20px + 2.0vw);
}

.list-small {
    font-size:calc(16px + 0.75vw);
}


.list:hover:not(.active) {
color: white;
  background-color: transparent;
  border-bottom: 2px solid #FFF  
}

.navbar_start > .list:hover:not(.active) {
color: white;
  background-color: transparent;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
  border-bottom: 2px solid #FFF  
}


.active {
  background-color: transparent;
}

a:link {
  text-decoration: none;
  padding: 0 30px 0 30px;
}

a:visited {
  text-decoration: none;
}


/* End Nav Bar index.php start.php */


/* Flex Footer-Bereich */

.flex-container {
  display: flex;
  flex-wrap: nowrap;
  background-color: #4c4c73;
  position: fixed;
   left: 0;
   bottom: 0;
   z-index:20;
   width:100%;
}

.flex-container > div {
  width: 33%;
  margin: auto;
  text-align: center;
  font-family: 'Open Sans Regular', sans-serif;
  line-height: 60px;
  font-size:18px;
  color: gray;
}

.flex-container > div:hover {
	color: white;
}

.flex-container > button {
  width: 33%;
  margin: auto;
  text-align: center;
  font-family: 'Open Sans Regular', sans-serif;
  line-height: 60px;
  font-size:18px;
  color: gray;
}

.flex-container > button:hover {
	color: white;
}

.grabbing {cursor: -webkit-grabbing; cursor: grabbing;}


.aboutflex-sa-m {
margin:auto;
background-color:#fff;
position:relative;
padding:0;
outline:0;
max-width:600px;
min-width:300px;
}

#chg_color {
  color: white;
  animation: mymove 3s infinite;
}

@keyframes mymove {
  50% {color: #827ffe;}
}

.textAbout {
    font-family:'PT Sans Caption', serif;
  font-size: 20px;
padding:20px;
}

.helpflex-sa-m {
margin:auto;
background-color:#fff;
position:relative;
padding:0;
outline:0;
width:100%;
height:100%;
}
/* Ende Flex Footer-Bereich */

/*/////////////[  w3.css  ]//////////////////////////////////////////////////////*/

.w3-button{border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}
.w3-button{
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
font-size:18px!important;
position:absolute;right:0;top:0;}
.w3-button:disabled{cursor:not-allowed;opacity:0.3}:disabled *{pointer-events:none}
.w3-modal{z-index:3;display:none;padding-top:100px;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4)}
.w3-modalImpr{z-index:20;display:none;padding-top:100px;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4)}
.w3-modalAbout{z-index:21;display:none;padding-top:100px;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4)}

.w3-modal-content{margin:auto;background-color:#fff;position:relative;padding:0;outline:0;max-width:600px;min-width:300px;}
.w3-container{padding:0.01em 16px}
.w3-container:after,.w3-container:before{content:"";display:table;clear:both}
.w3-card-4{box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19)}
.w3-animate-zoom {animation:animatezoom 0.6s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}.w3-large{font-size:18px!important}.w3-center{text-align:center!important}
.w3-section{margin-top:16px!important;margin-bottom:16px!important}
.w3-button:hover{color:#000!important;background-color:#ccc!important}