@charset "utf-8";
/* CSS Document */

html {
	margin: 0;
	padding: 0;
}

body {
	margin: 0;
	padding: 0;
	
	/*background-color: #f2f2f2;*/
	
	font-family: 'Open Sans';
	font-size: 16px;
	line-height: 1.7;
	
	color: #666666;
	
	-ms-hyphens: auto;
              -moz-hyphens: auto;
              -webkit-hyphens: auto;
              hyphens: auto;
}

.clear {
	clear:both;
}

.dsp-none {
	display: none;
}

#login {
	background-image: url("../images/backgrounds/login-bg.jpg");
	background-repeat: no-repeat;
}

#login a {
	color: #666666;
	text-decoration: none;
}


#login-container {
	width: 600px;
	margin-left: auto;
	margin-right:auto;
	margin-top: 50px;
	margin-bottom: 150px;
}

#login-dach {
	position: relative;
	width: 600px;
	height: 200px;
	background-image: linear-gradient(to bottom right, rgba(255,255,255,0.9), rgba(255,255,255,0.9));
  	clip-path:polygon(50% 0,100% 100%, 0 100%);
	margin-bottom: -1px;
}

#login-dach IMG {
	position: absolute;
	top: 100px;
	left: 220px;
}

#login-heading {
	background: rgba(255,255,255,0.9);
	padding: 0 20px 20px 20px;
	text-align: center;
}

h1 {
	color: #263a8a;
	font-weight: lighter;
	margin: 0;
	padding: 0;
	margin-top: 1px;
}

#login-text {
	margin-top: 15px;
	background: rgba(255,255,255,0.9);
	padding: 20px;
	letter-spacing: 1px;
	text-align: center;
}


#login-text span {
	text-align: left;
}

#login-form {
	margin-top: -1px;
	background: rgba(255,255,255,0.9);
	padding: 0 20px 20px 20px;
	text-align: justify;
	letter-spacing: 1px;
}


#login-form form {
	margin-top: 15px;
}

#login-form form INPUT {
	width: 100%;
	height: 50px;
	margin-bottom: 20px;
	text-align: center;
	background: rgba(196,196,196,0.9);
	border: none;
	font-size: 16px;
	color: #fff;
	font-weight: normal;
	letter-spacing: 1px;
}

#login-form form INPUT::placeholder {
	color: #fff;
}

#pwv-ab {
	margin-bottom: 25px;
}

#login-form form input[type="submit"] {
	background-color: #263a8a;
	text-transform: uppercase;
	font-weight: bold;
	cursor: pointer;
}

#login-form form input[type="button"] {
	background-color: #72af46;
	text-transform: uppercase;
	font-weight: bold;
	cursor: pointer;
}

#login-form form a {
	color: #c4c4c5;
	text-decoration: none;
}

#login-form form a:hover {
	color: #263a8a;
	text-decoration: none;
}

#login-footer {
	background: rgba(255,255,255,0.9);
	padding: 0 20px 20px 20px;
}

#emergency a {
	color: #c2363e;
	font-weight: bold;
	text-decoration: none;
}

#login-footer UL {
	width:100%;
	margin: 0;
	padding: 0;
	list-style: none;
	display:flex;
	justify-content: center;
}

#login-footer UL LI {
	margin-top: 10px;
	display: list-item;
	margin-right: 12px;
	margin-left: 12px;
}

#login-footer UL LI a {
	color: #666666;
	text-decoration: none;
}


/* Font Awesome fontawesome */
.input-fa-icon {
	position: relative;
}

.input-fa-icon i { 
position: absolute; 
	right: 12px; 
	top: 25px; 
	color: white;
	z-index: 99;
	font-size: 22px;
 } 


.featherlight-content {
	max-width: 850px;
}

#lightbox-emergency, #lightbox-help, #lightbox-DSE, #lightbox-imprint, #lightbox-signeup, #lightbox-kommunikation, #lightbox-resetpass, #lightbox-resetpass2 {
	/*margin: -25px;
	padding: -25px;*/
}

#lightbox-signeup #mieterknr INPUT {
	width: 19%;
	float: left;
	margin-left: 1%;
}

#lightbox-signeup #mieterknr .mieterknr INPUT {
	/*margin-left: 15px;*/
}

#lightbox-signeup #mieterknr INPUT:first-child {
	margin-left: 0;
}

#lightbox-signeup form #mieterknr INPUT {
	height: 50px;
	margin-bottom: 20px;
	text-align: center;
	background: rgba(196,196,196,0.9);
	border: none;
	font-size: 16px;
	color: #fff;
	font-weight: normal;
	letter-spacing: 1px;
}

#lightbox-signeup form #checklboxes INPUT {
	width: 20px;
	height: 20px;
	margin-bottom: 20px;
	text-align: center;
	background: rgba(196,196,196,0.9);
	border: none;
	font-size: 16px;
	color: #fff;
	font-weight: normal;
	letter-spacing: 1px;
	float: left;
	cursor: pointer;
}

#lightbox-signeup form INPUT::placeholder, #lightbox-resetpass #normalform INPUT::placeholder, #lightbox-resetpass2 #normalform INPUT::placeholder {
	color: #fff;
}

#lightbox-signeup #normalform INPUT, #lightbox-resetpass #normalform INPUT, #lightbox-resetpass2 #normalform INPUT {
	width: 100%;
	height: 50px;
	margin-bottom: 20px;
	text-align: center;
	background: rgba(196,196,196,0.9);
	border: none;
	font-size: 16px;
	color: #fff;
	font-weight: normal;
	letter-spacing: 1px;
}

#lightbox-signeup #normalform input[type="button"], #lightbox-resetpass #normalform input[type="button"], #lightbox-resetpass2 #normalform input[type="button"] {
	background-color: #263a8a;
	text-transform: uppercase;
	font-weight: bold;
	cursor: pointer;
}

#lightbox-signeup label.error, #lightbox-resetpass label.error, #lightbox-resetpass2 label.error, #login-form label.error {
	display: none !important;
}

#lightbox-signeup INPUT.error, #lightbox-resetpass INPUT.error, #lightbox-resetpass2 INPUT.error, #login-form INPUT.error {
	border: solid #c2363e 1px !important;
}

#lightbox-signeup input[type='checkbox'].error {
	outline: 1px solid #c2363e;
	border-radius: 0 !important;
}

.lb-inner {
	padding: 25px;
}

#havarienr {
	width: calc(100%+50px);
	color: #fff;
	font-size: 30px;
	font-weight: bold;
	background-color: #b5253a;
	padding: 25px;
	text-align: center;
	margin-left: -25px;
	margin-right: -25px;
}

/*main page */

#main-page {
	width: 100%;
}

#left-panel {
	width: 360px;
	height: 100%;
	min-height:100vh;
	background-color: #f2f2f2;
	float: left;
}

#main-logo {
	position: relative;
	width: 360px;
	height: 290px;
	background-color: #fff;
}

#main-logo A {	
	display: block;
	position: absolute;
	top: 70px;
	left: 45px;
}

.mainmenu {
	
}

.mainmenu-seperator-on {
	padding: 5px 0 0 50px;
	height: 30px;
	background-color: #2e3d8b;
	color: #fff;
}

.mainmenu-seperator-off {
	padding: 5px 0 0 50px;
	height: 30px;
	background-color: #c5c5c5;
	color: #fff;
}

.mainmenu ul {
	margin: 20px 0 20px 50px;
	padding: 0;
	list-style: none;
}

.mainmenu ul li {
	padding: 7px 0 7px 0;
}

.mainmenu ul li A {
	color: #c5c5c5;
	text-decoration: none;
	transition:.25s;
}

.mainmenu ul li A.current {
	color: #2e3d8b !important;
	text-decoration: none;
}

.mainmenu ul li A:hover {
	color: #2e3d8b;
	text-decoration: none;
}

.mainmenu ul li A SPAN {
	padding-left: 10px;
}

.red {
	color: #c2363e !important;
}

#header-image {
	width: 100%;
	height: 290px;
	background-image: url("../images/backgrounds/login-bg.jpg");
}

#main-panel {
	width: calc(100% - 360px);
	background-color: #fff;
	min-height:100vh;
	float: left;
}

#main-panel a {
	color: #2e3d8b;
	text-decoration: none;
}


/*collaps menu*/
.mainmenu-collapsed SPAN {
	display: none !important;
}

.left-panel-collapsed {
	width: 80px !important;
}

/*content pages general*/

#main-panel .content-inner {
	padding: 60px;
}

#main-panel .content-inner h1 {
	margin-bottom: 60px;
}

#main-panel .content-inner form input, #main-panel .content-inner form label {
    display:block;
	box-sizing: border-box;
}

#main-panel .content-inner form label {
	font-size: 13px;
	color: #2e3d8b;
}

#main-panel .content-inner form INPUT, #main-panel .content-inner form textarea, #main-panel .content-inner form SELECT, #main-panel .content-inner.dokumente SELECT {
	font-family: "Open Sans";
	width: 100%;
	height: 50px;
	margin-bottom: 20px;
	/*background: rgba(196,196,196,0.9);*/
	background-color: #f2f2f2;
	border: none;
	font-size: 16px;
	font-weight: normal;
	letter-spacing: 1px;
	padding-left: 20px;
	box-sizing: border-box;
	outline: none;
}

#main-panel .content-inner form textarea {
	padding: 25px;
}



#main-panel .content-inner form INPUT::placeholder {
	/*color: #fff;*/
}

#main-panel .content-inner form input[type="submit"] {
	width: 100%;
	box-sizing: border-box;
	background-color: #263a8a;
	text-transform: uppercase;
	font-weight: bold;
	cursor: pointer;
	color: #fff;
}

#main-panel .content-inner form input[type="button"] {
	width: 100%;
	box-sizing: border-box;
	background-color: #263a8a;
	text-transform: uppercase;
	font-weight: bold;
	cursor: pointer;
	color: #fff;
}

#main-panel .content-inner form A {
	text-decoration: none;
}


.cols {

}

.col50 {
	width:calc(50% - 30px); 
	float: left;
}

.col50:last-child, .col50-last {
	width:calc(50% - 30px); 
	float: left;
	padding-left: 60px;
}


/*Profil*/
#main-panel .profil form input[type="submit"], #main-panel .profil form input[type="button"] {
	margin-top: 120px;
}

/*Anregung*/


.anregung h1 {
	margin-bottom: 25px !important;
}

.anregung .ruler {
	border-bottom: solid 1px #ebebeb;
	margin-bottom: 15px;
}

.anregung .ruler2 {
	border-bottom: solid 1px #ebebeb;
	margin-top: 25px;
}

.anregung form ul {
	margin: 0;
	padding: 0;
  list-style-type: none;
}

.anregung form li {
  display: inline-block;
}

.anregung form input[type="checkbox"][id^="cb"] {
  /*display: none !important;*/
	visibility: hidden;
	width: 0 !important;
	height: 0 !important;
	margin-top: -20px;
}

.anregung form label.check {
  border: 1px solid #fff;  
  display: block;
  position: relative;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.anregung form label::before {
  background-color: white;
  color: white;
  content: " ";
  display: block;
  border: 1px solid grey;
  position: absolute;
  top: -5px;
  left: -5px;
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 28px;
  transition-duration: 0.4s;
  transform: scale(0);
}

.anregung form label DIV {
  width: 221px;
  height: 177px;  
  transition-duration: 0.2s;
  transform-origin: 50% 50%;
	background-color: #ededed;
	text-align: center;
}
.anregung form label DIV.icon i {
	margin-top: 28%;
	font-size: 57px;
}

.anregung form :checked+label DIV {
  /*border-color: #ddd;*/
	background-color: #7a7db8;
	color: #fff;
}

.anregung form label DIV DIV.txt {
	height: 53px;
	position: absolute;
	bottom: 0;
	background-color: #f6f6f6;
	margin: auto;
	color: #868585;
}
.anregung form :checked+label DIV DIV.txt {
  /*border-color: #ddd;*/
	background-color: #bdbedc;
	color: #fff;
}

.anregung form textarea {
	margin-top: 14px;
	height: 281px !important;
}

/*.anregung form :checked+label::before {
  content: "✓";
  background-color: grey;
  transform: scale(1);
}

.anregung form :checked+label img {
  transform: scale(0.9);
  box-shadow: 0 0 5px #333;
  z-index: -1;
}*/


/*Vertragsinfos*/

.vertrag .ruler {
	border-bottom: solid 1px #ebebeb;
	margin-bottom: 15px;
}

.vertrag .ruler2 {
	border-bottom: solid 1px #ebebeb;
	margin-top: 15px;
}

.vertrag .green {
	background-color: #7cb03f;
}
.vertrag .red {
	background-color: #b5253a;
}

.vertrag #vetragskonto {
	
}

.vertrag #vetragskonto #heading {
	background-color: #2e3d8b;
	color: #fff;
	font-weight: bold;
}
.vertrag #vetragskonto #heading i {
	display: block;
	margin: 25px 0 0 20px;
	float: right;
}

.vertrag #vetragskonto .row {
	min-height: 50px;
	margin: auto;
	background-color: #ededed;
	padding: 0 15px 0 15px;
	line-height: 50px;
}

.vertrag #vetragskonto .row p {
	margin: auto;
	float: left;
}

.vertrag #vetragskonto .dot {
 height: 15px;
  width: 15px;
  border-radius: 50%;
  display: inline-block;
  float: right;
  margin-top: 18px;
}

#ausgeglichen, #nichtausgeglichen {
	display: none;
}


.vertrag #vetragskonto .cols {
}
.vertrag #vetragskonto .col25 {
	width: 25%;
	min-height: 10px;
	float: left;
}

/*meine dokumente */

.dokumente .ruler {
	border-bottom: solid 1px #ebebeb;
	margin-bottom: 15px;
}

.dokumente .ruler2 {
	border-bottom: solid 1px #ebebeb;
	margin-top: 0px;
}

.dokumente #docsuche, .dokumente #jahr {
	background-color: #ededed !important;
}

.dokumente .input-fa-icon i {
	color: #868585 !important;
}

.dokumente #dokumente-container {
	
}

.dokumente #dokumente-container #categories {
	margin-top: 30px;
}

.dokumente #dokumente-container #jahrseclect {
	margin-top: 30px;
}

.dokumente #dokumente-container #jahrseclect SELECT{
	
}

.dokumente #dokumente-container #categories div.tab {
	float: left;
	/*background-color: #2e3d8b;*/
	background-color: #ededed;
	padding: 10px 35px 10px 35px;
	text-align: center;
	cursor: pointer;
}

.dokumente #dokumente-container #categories div.current {
	background-color: #2e3d8b;
	color: #fff;
}

.dokumente .results {
	margin-top: 40px;	
}


.dokumente div.dokument {	
	width: calc(50% - 25px);
	min-width: 406px;
	height: 82px;
	position: relative;
	margin: 20px 0 20px 0;
	padding: 15px 0px 15px 15px;
	color: #fff;
	float: right;
}

.dokumente div.dokument:nth-child(odd) {
	/*margin-right: 20px;*/
	float: left;
}

.dokumente div.dokument i {
	position: absolute;
	top: 20px;
	right: 10px;
	cursor: pointer;
	color: #fff !important;
}

.dokumente div.dokument .heading {
	font-size: 13px;
	margin-bottom: 10px;
}

.dokumente div.blue .hinweis {
	font-size: 13px;
	color: #7074b2;
}
.dokumente div.green .hinweis, .dokumente div.orange .hinweis, .dokumente div.red .hinweis {
	font-size: 13px;
	color: #ededed;
}


.dokumente div.blue {
	background-color: #2e3d8b;
}
.dokumente div.green {
	background-color: #7cb03f;
}
.dokumente div.orange {
	background-color: #cf8920;
}
.dokumente div.red {
	background-color: #e5877e;
}

/*startseite*/
.startseite .ruler {
	border-bottom: solid 1px #ebebeb;
	margin-bottom: 15px;
}

.startseite .ruler2 {
	border-bottom: solid 1px #ebebeb;
	margin-top: 40px;
	margin-bottom: 15px;
}

.startseite .startservices {
	
}

.startseite .startservices a {
	float: left;
	margin-right: 10px;
}

.startseite .startservices DIV.kachel {
	position: relative;
	margin-top: 15px;
	width: 221px;
	height: 177px;
	transition-duration: 0.2s;
	transform-origin: 50% 50%;
	background-color: #ededed;
	text-align: center;
}

.startseite .startservices DIV.kachel:hover {
	background-color: #7a7db8;
}

.startseite .startservices DIV.kachel DIV.icon i {
	margin-top: 28%;
	font-size: 57px;
	color: #2e3d8b;
	transition-duration: 0.2s;
}

.startseite .startservices DIV.kachel:hover DIV.icon i {
	color: #fff;	
}

.startseite .startservices DIV.txt {
	width: 100%;
	height: 53px;
	position: absolute;
	bottom: 0;
	background-color: #f6f6f6;
	margin: auto;
	color: #868585;
	transition-duration: 0.2s;
}

.startseite .startservices DIV.kachel {
	height: 207px;
}

.startseite #startservices2 DIV.txt {
	height: 83px;
}

.startseite .startservices DIV.kachel:hover DIV.txt {
	background-color: #bdbedc;
	color: #fff;	
}

/*notfall*/
.notfall .ruler {
	border-bottom: solid 1px #ebebeb;
	margin-bottom: 15px;
}

.notfall .ruler2 {
	border-bottom: solid 1px #ebebeb;
	margin-top: 15px;
	margin-bottom: 15px;
}

.notfall #note {
	position: relative;
}

.notfall #note i {
	position: absolute;
	top: 12px;
	right: 0;
	font-size: 25px;
	color: #d9d9d9;
}

.notfall #notfallbox {
	background-color: #b5253a;
	font-weight: bold;
	text-align: center;
	color: #fff;
	font-size: 30px;
}

.notfall #note2 {
	font-size: 13px;
}

/*hilfe*/
.hilfe h1 {
	margin-bottom: 30px!important ;
}

.hilfe .ruler {
	border-bottom: solid 1px #ebebeb;
	margin-bottom: 15px;
}

.hilfe .ruler2 {
	border-bottom: solid 1px #ebebeb;
	margin-top: 15px;
	margin-bottom: 15px;
}

.hilfe #note {
	position: relative;
}

.hilfe #note i {
	position: absolute;
	top: 12px;
	right: 0;
	font-size: 25px;
	color: #d9d9d9;
}

/*dse datenschutz*/
.dse h1 {
	margin-bottom: 30px!important ;
}

.dse h2 {
	margin: 0;
	padding: 0;
	font-size: 18px;
	color: #263a8a;
	font-weight: normal;
}

.dse .ruler {
	border-bottom: solid 1px #ebebeb;
	margin-bottom: 15px;
}

.dse .text {
	text-align: justify;
}


/*impressum*/
.impressum {
	
}

.impressum h1 {
	margin-bottom: 30px!important ;
}

.impressum .ruler {
	border-bottom: solid 1px #ebebeb;
	margin-bottom: 15px;
}



/*message boxes*/
.jconfirm {
	z-index: 2147483649 !important;
}

.jconfirm.jconfirm-white .jconfirm-bg, .jconfirm.jconfirm-light .jconfirm-bg {

}


.jconfirm.jconfirm-white .jconfirm-box, .jconfirm.jconfirm-light .jconfirm-box {
	border-radius: 0px !important;
}

.jconfirm .jconfirm-box.jconfirm-type-green {
	border-top: solid 7px #72af46 !important;
}


/*#secBetriebskosten, #secMieterakte, #secMitgliedschaft {**/
#secMitgliedschaft {
	display: none;
}


@media only screen and (max-width: 1350px) {
	.dokumente div.dokument {
		width: 100%;
		float: left;
	}
}


/*2fa*/
.twofa .ruler {
	border-bottom: solid 1px #ebebeb;
	margin-bottom: 15px;
}

.twofa .ruler2 {
	border-bottom: solid 1px #ebebeb;
	margin-top: 15px;
	margin-bottom: 15px;
}

.twofa #note {
	position: relative;
}

.twofa #note i {
	position: absolute;
	top: 12px;
	right: 0;
	font-size: 25px;
	color: #d9d9d9;
}

.twofa #notfallbox {
	background-color: #b5253a;
	font-weight: bold;
	text-align: center;
	color: #fff;
	font-size: 30px;
}

.twofa #note2 {
	font-size: 13px;
}

.twofa .keybg {
	display: inline-block;
	padding: 15px;
	border: solid 2px #b5253a;
}

.twofa INPUT::placeholder {
	color: #fff;
}

.twofa INPUT {
	width: 30%;
	height: 50px;
	margin-bottom: 20px;
	text-align: center;
	background: rgba(196,196,196,0.9);
	border: none;
	font-size: 16px;
	color: #fff;
	font-weight: normal;
	letter-spacing: 1px;
}

.twofa input[type="button"] {
	background-color: #72af46;
	text-transform: uppercase;
	font-weight: bold;
	cursor: pointer;
}



/*private*/
#main-content #formMeinProfil label.error {
	display: none !important;
}

.anregung #error label.error {
	display: inline-block !important;
}

#main-content INPUT.error, .anregung INPUT.error, .anregung select.error, .anregung TEXTAREA.error {
	border: solid #c2363e 1px !important;
}

.anregung #errors {
	
}

.anregung #errors label.error {
	color: #c2363e !important;
	font-weight: bold;

	 -webkit-animation: blink 2s infinite both;
            animation: blink 2s infinite both;
}



@-webkit-keyframes blink {
  0%,
  50%,
  100% {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0.8;
  }
}
@keyframes blink {
  0%,
  50%,
  100% {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0.8;
  }
}

#mob-menu {
	display: none;
}

.confirmSmall {
	width: 500px !important;
}

.featherlight-content {
	padding: 0!important;
}

#profilMobile {
	display: none;
}


#highcontrast-btn {
	width: 600px;
	height: 50px;
	margin: 25px auto 25px auto;
	
	padding-top: 15px;
	
	background-color: #000;
	color: #fff;
	font-size: 20px;
	text-align: center;
	text-transform: uppercase;
	
	cursor: pointer;
}

#normal-btn {
	display: none;
}

#header-image #highcontrast-btn {
	position: absolute;
	right: 0;
	top: 0;
	margin: 0;
	width: 100px;
	height: 50px;
	
	padding-top: 15px;
	
	background-color: #000;
	color: #fff;
	font-size: 20px;
	text-align: center;
	text-transform: uppercase;
	
	cursor: pointer;
}

#header-image #normal-btn {
	display: none;
}

/*mobile*/
@media only screen and (max-width: 1050px) {
	
	#login-container, #login-dach  {
		width: 100%;
	}
	
	#login-dach {
		margin-bottom: 0;
	}
	
	#login-dach IMG {
		top: 100px;
		left: calc(50% - 80px);
	}
	
	#login-heading h1 {
		margin: auto;
		width: 80%;
	}
	
	#login-form form input[type="text"], #login-form form input[type="password"] {
		width: calc(100% - 15px);
	}
	
	#highcontrast-btn {
	width: 100%;
	height: 50px;
	}
	
	
	#main-page {
		padding-bottom: 40px;
	}
	
	#main-panel .content-inner {
		padding: 15px;
	}
	
	#left-panel {
		display: none;
	}
	
	#header-image {
		/*display: none;*/
	}
	
	#main-panel {
		width: 100%;
	}
	
	#mob-menu {
		display: block;
		/*background-color: #2e3d8b;*/
		background-color: #fff;
		overflow: hidden;
		position: relative;
		padding: 5px 0 0 0;
	}
	
	#mob-menu #myLinks {
 		display: none;
		background-color: #f2f2f2;
	}
	
	#mob-menu a {
	  color: #2e3d8b;
	  padding: 14px 16px;
	  text-decoration: none;
	  display: block;
	}
	
	#mob-menu #myLinks a {
		color: #c5c5c5;
	}
	
	#mob-menu #myLinks a:hover {
		color: #2e3d8b;
	}
	
	#mob-menu a.icon {
	  display: block;
	  position: absolute;
	  font-size: 50px;
	  right: 0;
	  top: -11px;
	}
	
	#mob-menu .current {
	  color: #2e3d8b !important;
	}
	
	#mob-menu .mainmenu-seperator-on, #mob-menu .mainmenu-seperator-off {		
		padding: 5px 0 0 20px;
	}
	
	
	#main-panel .content-inner h1 {
		margin-bottom: 25px;
		hyphens: auto;
	}
	
	.startseite .startservices a {
		display: block;
		width: calc(50% - 10px);
	}
	
	.startseite .startservices DIV.kachel {
		width: 100%;
		
	}
	
	.startseite .startservices DIV.kachel .txt {
		height: auto;
		overflow: hidden;
	}
	
	.startseite .startservices DIV.kachel DIV.icon i {
		margin-top: 0;
		display: block;
		
		position: absolute;
		top: calc(50% - 33px);
		left: calc(50% - 33px);
	}
	
	
	.profil form input[type="button"] {
		margin-top: 25px !important;
	}
	
	#profilDesktop {
		display: none;
	}
	#profilMobile {
		display: block;
	}
	
	.col50 {
		width: 100%;
	}
	
	.col50:last-child, .col50-last {
		width: 100%;
		padding-left: 0px;
	}
	
	
	.vertrag #vetragskonto .col25 {
		width: 50%;
	}
	
	.vertrag #vetragskonto .row {
	
	}
	
	
	.twofa .keybg {
		display: block;
	}
	
	.twofa INPUT {
		width: calc(100% - 17px);
	}
	
	.twofa input[type="button"] {
		width: calc(100% - 2px);
	}
	
	.dokumente div.dokument {
		min-width: 0;
		max-width: calc(100% - 15px) !important;
		height: auto;
		hyphens: auto;
	}
	
	.dokumente #dokumente-container #categories div.tab {
		width: calc(50% - 70px);
	}
	
	.dokumente #dokumente-container #categories div.tab:nth-child(3), .dokumente #dokumente-container #categories div.tab:nth-child(4) {
		margin-top: 20px;		
	}
	
	
	#formAnregung .col50 {
		margin-bottom: 25px;
	}
	
	.anregung form li {
		display: block;
		width: calc(50% - 3px);
		float: left;
	}
	
	.anregung form li:nth-child(even) {
		margin-left: 5px;
	}
	
	.anregung form label DIV {
		width: 100%;
	}
	
	.anregung form label DIV.icon i {
		margin-top: 0;
		display: block;
		
		position: absolute;
		top: calc(50% - 25px);
		left: calc(50% - 33px);
	}
	
	#note p { 
		width: calc(100% - 30px);
	}
	
	/*.jconfirm-holder, .jconfirm-box {
		max-width: 70% !important;
	}*/
	
	.confirmSmall {
		width: 90% !important;
	}
	
	
}


@media only screen and (max-width: 500px) {
	.vertrag #vetragskonto .col25 {
		width: 100%;
	}
	
}