/*- LOGIN PROCESS -*/

/* GENERAL */
/*Hide Header on login page*/
header.mainHeader {
	display: none!important;
}
h1 {
	font-size: 20px;
}
h2,h3 {
	font-size: 14px;
}
p,label, input, select {
	font-size: 15px;
}
button {
	font-size: 13px;
}
p {
	margin-bottom: 0.5rem;
}
a,
a:visited,
a:link {
	color: #3db9bf;
}
/*Form*/
form input,
form select {
	padding: 5px 10px;
	width: 100%;
	border-width: 0 0 1px 0;
	border-color: #b8b8b8;
}
form select {
	padding: 5px;
    background: transparent;
    z-index: 1;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
form input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
  color: #1e1e1e;
}
form input::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: #1e1e1e;
  opacity:  1;
}
/*Buttons*/
button {
	min-width: 150px;
	font-weight: 900;
	font-style: italic;
	padding: 9px 18px;
	height: 34px;
	line-height: 8px;
	background: #fabf12;
	border: none;
	border-radius: 4px;
	box-shadow: 4px 4px 10px rgba(0,0,0,0.5);
	cursor: pointer;
}
button:focus {
	outline: 0;
}
button.white_border {
	background: #ffffff;
	border-width: 1px;
	border-style: solid;
}
button.white_color {
	color: #ffffff;
}
button.transparent_borderBlue {
	background: transparent;
	border-width: 1px;
	border-style: solid;
	color: #3db9bf;
	border-color: #3db9bf;
}
button.transparent_borderBlue:hover,
button.transparent_borderBlue:focus {
	color: #fff;
}
button.blue_back {
	background: #3db9bf;
	color: #ffffff;
}
button:hover,
button:focus {
	background: #3db9bf;
	-webkit-transition: 0.25s ease;
	transition: 0.25s ease;
}
button.blue_back:hover,
button.blue_back:focus {
	background: #fabf12;
}
button.login-head__btn {
	margin-left: auto;
	min-width: inherit;
	width: 60px;
	height: 25px;
	font-size: 13px;
	padding: 0px;
	border: 1px solid #1e1e1e;
	background: #fff;
	box-shadow: none;
}

.login-container {
	overflow-x: hidden;
}
.black_line {
	width: 100%;
	height: 1px;
	background: #1e1e1e;
}
.blue_color,
.active {
	color: #3db9bf;
}
.aqua_bold {
	font-weight: 900;
	font-style: italic;
	color: #3db9bf;
}
section:not(:first-child),
#login-section2 .__steps:not(:first-child) {
	display: none;
}
section {
	flex: 1 1 100%;
	/*height: 100vh;*/
}
section .login-head img {
	width: 120px;
	height: 100%;
}

/*** MAIN ***/
main {
	flex: 1 1 75%;
	/*height: 100vh;*/
}
/*Table*/
main table {
	font-size: 14px;
}
main table a,
main table a:visited,
main table a:link {
	text-decoration: underline;
}
main .thead-grey th {
	background-color: #e8e8e8;
}
main table tr td:first-child {
	border-left: none;
}
main table tr td:last-child {
	border-right: none;
}
main table td,
main table th {
	/*height: 34px;*/
	padding: .5rem;
	text-align: center;
	border: 1px solid #e8e8e8;
}

/* SECTION 1 */
#login-section1 {
	/*height: calc(100vh - 163px);*/
	display: flex;
	height: 100vh;
}
#login-section1>div {
	margin: auto;
	max-width: 225px;
	width: 100%
}
#login-section1 .login-head {
	margin: 0 auto 70px;
}
#login-section1 .form-group {
	margin-bottom: 2rem;
}
#login-section1 button {
	width: 100%;
}
#login-section1 button.white_border {
	border-color: #1e1e1e
}
#login-section1 .login-footer>div {
	margin: 45px auto;
}
#login-section1 .login-footer p {
	margin-top: 1rem;
}

/* SECTION 2 */
#login-section2 .login-head {
	margin: 20px;
}
#login-section2 .__fixed-navbar {
	visibility: hidden;
}
#login-section2 .login-head img {
	width: 155px;
}
#login-section2 .collapse-btn {
	margin-top: 2.5rem;
}
#login-section2 form label {
		margin: 0;
		display: none;
}
#login-section2 form .column-group {
	position: relative;
}
#login-section2 button.white_border {
	color: #3db9bf;
	border-color: #3db9bf;
}
#login-section2 button.white_border:hover,
#login-section2 button.white_border:focus {
	color: #ffffff;
}
#login-section2 .login-body .__steps:not(:first-child) {
	margin-top: 50px;
}
#login-section2 form {
	max-width: 280px;
	width: 100%;
}
#login-section2 form input,
#login-section2 form .column-group,
#login-section2 form select {
	width: 100%;
	min-width: 55px;
}
#login-section2 form .column-group input,
#login-section2 form .column-group select {
		width: 100%;
		border-width: 1px;
		border-style: solid;
}
#login-section2 form input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
  color: #1e1e1e;
}
#login-section2 form input::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: #1e1e1e;
  opacity:  1;
}

#login-section2 form .radio_button [type="radio"]:checked,
#login-section2 form [type="checkbox"]:checked,
#login-section2 form .radio_button [type="radio"]:not(checked),
#login-section2 form [type="checkbox"]:not(checked) {
	position: absolute;
	left: -99999px;
}
#login-section2 form .radio_button [type="radio"]:checked + label,
#login-section2 form [type="checkbox"]:checked + label,
#login-section2 form .radio_button [type="radio"]:not(checked) + label,
#login-section2 form [type="checkbox"]:not(checked) + label {
	position: relative;
	display: block;
	padding-left: 15px;
	cursor: pointer;
}
#login-section2 form .radio_button [type="radio"]:checked + label:before,
#login-section2 form [type="checkbox"]:checked + label:before,
#login-section2 form .radio_button [type="radio"]:not(checked) + label:before,
#login-section2 form [type="checkbox"]:not(checked) + label:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 15px;
	height: 15px;
	border: 1px solid #3DB9BF;
	border-radius: 100%;
	background: #fff;
}
#login-section2 form [type="checkbox"]:checked + label:before,
#login-section2 form [type="checkbox"]:not(checked) + label:before {
	border: 1px solid #1e1e1e;
	border-radius: inherit;
}
#login-section2 form .radio_button [type="radio"]:checked + label:after,
#login-section2 form [type="checkbox"]:checked + label:after,
#login-section2 form .radio_button [type="radio"]:not(checked) + label:after,
#login-section2 form [type="checkbox"]:not(checked) + label:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 15px;
	height: 15px;
	border: none;
	border-radius: 100%;
	background: #3DB9BF;
	-webkit-transition: 0.25s ease;
	transition: 0.25s ease;
}
#login-section2 form [type="checkbox"]:checked + label:after,
#login-section2 form [type="checkbox"]:not(checked) + label:after {
	border-radius: inherit;
}
#login-section2 form .radio_button [type="radio"]:not(checked) + label:after,
#login-section2 form [type="checkbox"]:not(checked) + label:after {
	opacity: 0;
	-webkit-transform: scale(0);
	transform: scale(0);
}
#login-section2 form .radio_button [type="radio"]:checked + label:after,
#login-section2 form [type="checkbox"]:checked + label:after {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}
#login-section2 .select_field img {
		position: absolute;
		width: 15px;
		top: calc(50% - 4px);
		right: 10px;
		z-index: 0;
}
#login-section2 .payment-logo img {
	height: 20px;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}
/* Rating Stars */
#login-section2 #emplfehlen form .rating label {
	width: inherit;
}
#login-section2 form .rating > input { display: none; }
#login-section2 form .rating > label:before {
	margin: 3px;
	font-size: 1.25em;
	font-family: FontAwesome;
	display: inline-block;
	content: "\f005";
}
#login-section2 form .rating > .half:before {
	content: "\f089";
	position: absolute;
}
#login-section2 form .rating > label {
	color: #fff;
	float: right;
	-webkit-text-stroke-color: #3db9bf;
	-webkit-text-stroke-width: 1px;
}

#login-section2 form .rating > input:checked ~ label, /* show gold star when clicked */
#login-section2 form .rating:not(:checked) > label:hover, /* hover current star */
#login-section2 form .rating:not(:checked) > label:hover ~ label { color: #3db9bf;  } /* hover previous stars in list */

#login-section2 form .rating > input:checked + label:hover, /* hover current star when changing rating */
#login-section2 form .rating > input:checked ~ label:hover,
#login-section2 form .rating > label:hover ~ input:checked ~ label, /* lighten current selection */
#login-section2 form .rating > input:checked ~ label:hover ~ label { color: #32d2da;  }

/* Absolute Black Background */
#login-section2 .absolute-blackBack {
	display: none;
	position: fixed;
	background: rgba(0, 0, 0, 0.8);
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 1001;
}
#login-section2 .absolute-blackBack > div {
	margin: auto;
	height: 100vh;
}
#login-section2 .absolute-blackBack h1 {
	text-align: center;
	margin-bottom: 40px;
	font-weight: normal;
	font-style: inherit;
	color: #fff;
}
#login-section2 .absolute-blackBack .group-buttons {
	flex-direction: column;
	max-width: 340px;
	width: 100%;
}
#login-section2 .absolute-blackBack .group-buttons button {
	width: 150px;
	margin: auto;
}
#login-section2 .absolute-blackBack .group-buttons button:first-child {
	margin-bottom: 20px;
}

/* STEP 1 */
#halloUser>div {
	width: max-content;
	width: -moz-max-content;
	height: calc(100vh - 85px);
	margin: auto;
}
#halloUser .black_line {
	margin-bottom: 40px;
	width: 60px;
}

/* STEP 2 */
#kundendaten .form-group__button {
	margin: 30px auto 60px;
}
#kundendaten h3 {
	margin-bottom: 50px;
}
#kundendaten .pin-andern {
	width: 100%;
}

/* Packet Cancel */
#login-section2 #packetCancel-form {
	max-width: 410px;
}
#login-section2 #packetCancel-form .radio_button {
	margin-bottom: 15px;
}
#login-section2 #packetCancel-form .radio_button label {
	padding-left: 30px;
	width: 100%;
}
#kundendaten #packetCancel-form .__head h3 {
	margin-bottom: 30px;
}
#kundendaten #packetCancel-form .__head p {
	text-align: center;
}
#kundendaten #packetCancel-form .__body {
	margin: 60px auto;
}
#kundendaten #packetCancel-form .__footer {
	margin-bottom: 30px;
}
#kundendaten #packetCancel-form .__footer p {
	margin-bottom: 0;
}
#kundendaten .kundendaten-packetCancel {
	display: none;
}

/* STEP 3 */
#zahlungen p {
	margin-bottom: 16px;
}

#zahlungen .zahlungen-rechnung h3 {
	margin-bottom: 30px;
}
#zahlungen .zahlungen-rechnung,
#zahlungen .zahlungen-sart,
#zahlungen .zahlungen-konto {
	margin-bottom: 60px;
}
#zahlungen .zahlungen-rechnung h1 {
	margin-bottom: 0;
}
#zahlungen .zahlungen-sart .payment-logo {
	width: 290px;
	height: 40px;
}
#zahlungen .zahlungen-konto {
	max-width: 280px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}
#zahlungen .zahlungen-konto p {
	text-align: center;
}
#zahlungen .zahlungen-papier {
	margin: 0 auto 60px;
	max-width: 280px;
	width: 100%;
}

/* STEP 4 */
#verwaltung h1 {
	margin-bottom: 0;
}
#verwaltung h3 {
	margin-bottom: 50px;
}
#verwaltung p {
	margin-bottom: 20px;
	max-width: 290px;
	text-align: center;
}
#verwaltung .dritt-remove i {
	font-size: 1.25rem;
	color: #1e1e1e;
}
#verwaltung form button[data-toggle="collapse"] {
	margin: 0 auto 90px;
}
#verwaltung .radioField {
	width: 32px;
}
#verwaltung .radio_button {
	height: 15px;
}
#verwaltung table th,
#verwaltung table td {
	text-align: center;
}
#verwaltung table,
#verwaltung table.table-verwaltung tr {
	max-width: 280px;
	width: 100%;
}
#verwaltung table.marginBottom {
	margin-bottom: 45px;
}
#verwaltung table.table-large {
	display: none;
}
#verwaltung table.table-verwaltung .__zugriff .column-group,
#verwaltung table.table-verwaltung .__zugriff select {
	width: 60px;
}
#verwaltung table.table-verwaltung .__zugriff label {
	margin-right: 15px;
}
#verwaltung table.table-verwaltung tr th:nth-child(1),
#verwaltung table.table-verwaltung tr td:nth-child(1) {
	flex: 1 1 50%;
}
#verwaltung table.table-verwaltung tr th:nth-child(2),
#verwaltung table.table-verwaltung tr td:nth-child(2) {
	flex: 1 1 75%;
}
#verwaltung table.table-verwaltung tr td:last-child {
	border-left: none;
}
#verwaltung table.table-verwaltung .__name td {
	border: none;
}
#verwaltung table.table-verwaltung .__two-col tr th,
#verwaltung table.table-verwaltung .__two-col tr td {
	flex: 1 1 50%;
}
#verwaltung table.table-verwaltung select[name="login8Bei_small"] {
	width: 120px;
}
#verwaltung table.table-verwaltung select[name="login8State_small"] {
	width: 50px;
}
.verwaltung-dritt #dritt {
	margin: 5px 9px 30px;
}
.verwaltung-zugriff {
	margin-top: 90px;
}
#verwaltung .verwaltung-zugriff p,
#verwaltung .verwaltung-auswer p {
	margin-bottom: 40px;
}
.verwaltung-zugriff .zugriffTime {
	padding: 0;
}
.verwaltung-zugriff .zugriffTime input,
.verwaltung-zugriff .zugriffTime select {
	padding: 4px;
	border-style: solid;
	border-width: 1px;
}
.verwaltung-zugriff .zugriffTime div.form-group {
	margin: 0;
	flex: 1;
}
#login-section2 #drittCollapse .form-group__button {
	flex-direction: column;
	height: 100px;
}
#login-section2 #drittCollapse .form-group__button button {
	width: 150px;
	margin: auto;
}
#login-section2 #deinBuddyCollapse label,
#login-section2 #dubistBuddyCollapse label,
#login-section2 #drittCollapse label {
	display: none;
}
#login-section2 #login-form8 p {
	margin: 25px auto 0;
}
#login-section2 #login-form8 button {
	margin: 25px 0 90px auto;
}
#login-section2 #login-form7 .table-small,
#login-section2 #login-form8 .table-small {
	margin-bottom: 40px;
}
#login-section2 #login-form8 .select_field img {
	right: 5px;
}
#login-section2 #login-form8 .login8Bei .column-group {
	max-width: 125px;
	width: 100%;
}
.verwaltung-auswer {
	margin-bottom: 120px;
}

/* STEP 5 - STEP 6 */
#aktionen h1 {
	margin-bottom: 0;
}
#emplfehlen h1 {
	margin-bottom: 15px;
}
#aktionen h3,
#emplfehlen h3 {
	margin-bottom: 30px;
}
#login-form9 {
	margin: 30px auto 60px;
}
#emplfehlen .emplfehlen_social,
#emplfehlen .star_review {
	max-width: 180px;
	width: 100%;
	margin: auto;
	margin-bottom: 20px;
}
#emplfehlen .emplfehlen_social {
	color: #1e1e1e;
}
#emplfehlen .emplfehlen_social img {
	width: 25px;
}
#emplfehlen .emplfehlen_social p {
	margin: 0;
	margin-left: 15px;
}
#emplfehlen .text_area p {
	color: #e8e8e8;
}
#emplfehlen .emplfehlen-media {
	margin: 60px auto;
}
#emplfehlen .emplfehlen-media .subhead {
	margin-bottom: 30px;
}
#emplfehlen .emplfehlen-footer {
	margin-bottom: 60px;
}
#emplfehlen .emplfehlen-footer h3 {
	margin-bottom: 0;
	max-width: 435px;
	text-align: center;
}


/*** ASIDE ***/
aside {
	display: none;
	flex: 1 1 25%;
	max-width: 250px;
	height: 100vh;
	background: #fff;
	transition: .25s ease;
	box-shadow: -1px 1px 7px rgba(0,0,0,0.5);
}
aside p {
	margin: 0;
}
aside table tr {
	display: block;
	margin-bottom: 20px;
}
aside table tr:last-child {
	margin-bottom: 40px;
}
aside table tr td {
	font-size: 14px;
}
aside table tr td:nth-child(1) {
	width: 55px;
}
aside table tr td:nth-child(2) {
	padding-left: 40px;
}
.login-user__info {
	margin: 30px auto;
}
.login-user__info img {
	width: 55px;
	height: auto;
}
.login-user__info div:nth-child(2) {
	margin-left: 40px;
}
.login-user__status {
	/*margin: 0 auto auto 60px;*/
	margin: 0 auto;
}
.login-user__menu {
	margin: auto;
	height: 300px;
}
.login-user__menu ul {
	margin: 0;
	padding: 0;
}
.login-user__menu ul li:not(:last-child) {
	margin-bottom: 20px
}
.login-user__menu ul li a {
	padding: 10px;
	color: #1e1e1e;
}
.login-user__menu ul li a.active,
.login-user__menu ul li a:hover,
.login-user__menu ul li a:focus {
	color: #3db9bf;
}
aside .black_line {
	margin: 0 auto 50px;
	width: 90%;
}
aside button {
	margin: auto;
	margin-bottom: 1.5rem;
	width: 150px;
}
aside button.kunde_werden {
	margin-bottom: 1rem;
}

/*** FOOTER ***/
.main-footer {
	display: none;
}

@media(max-width: 375px) and (max-height: 667px) {

	.login-user__info {
		margin: 30px auto;
	}
	aside .black_line {
		margin: 0 auto 25px;
	}
	aside table tr {
		margin-bottom: 15px;
	}
	aside table tr:last-child {
		margin-bottom: 40px;
	}
	.login-user__menu {
		height: 280px;
	}

}

@media(max-width: 360px) and (max-height: 640px) {

	.login-user__info {
		margin: 25px auto;
	}
	aside .black_line {
		margin: 0 auto 25px;
	}
	aside table tr {
		margin-bottom: 15px;
	}
	aside table tr:last-child {
		margin-bottom: 40px;
	}
	.login-user__menu {
		height: 255px;
	}

}

@media(max-width: 360px) and (max-height: 568px) {

	.login-user__info {
		margin: 20px auto;
	}
	aside .black_line {
		margin: 0 auto 20px;
	}
	aside table tr {
		margin-bottom: 10px;
	}
	aside table tr:last-child {
		margin-bottom: 30px;
	}
	.login-user__menu {
		height: 230px;
	}

}





/* MEDIA 360px */
@media(min-width: 360px) {

	/* GENERAL */
	h1 {
		font-size: 22px;
	}
	h2,h3 {
		font-size: 16px;
	}

	/* SECTION 2 */
	#login-section2 form {
		max-width: 330px;
		width: 100%;
	}

	/* STEP 4 */
	#verwaltung p {
		margin-bottom: 20px;
		max-width: 330px;
		text-align: center;
	}
	#verwaltung table,
	#verwaltung table.table-verwaltung tr {
		max-width: 330px;
		width: 100%;
	}
	#login-section2 #drittCollapse .form-group__button {
		flex-direction: row;
	}

	/* Absolute Black Background */
	#login-section2 .absolute-blackBack .group-buttons {
		flex-direction: row;
	}
	#login-section2 .absolute-blackBack .group-buttons button:first-child {
		margin-bottom: 0;
	}

}

/* MEDIA 375px */
@media(min-width: 375px) {}

/* MEDIA 480px */
@media(min-width: 480px) {

	/* SECTION 2 */
	#login-section2 form {
		max-width: 470px;
		width: 100%;
	}
	#login-section2 form input,
	#login-section2 form .column-group,
	#login-section2 form select {
		width: 70%;
		margin-right: 20px;
	}
	#login-section2 #deinBuddyCollapse label,
	#login-section2 #dubistBuddyCollapse label,
	#login-section2 #drittCollapse label,
	#login-section2 form label {
		display: block;
		width: 30%;
		margin-left: 20px;
	}

	#login-section2 form .radio_button label {
		margin-left: 0;
	}

	#login-section2 form input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
		color: transparent;
	}
	#login-section2 form input::-moz-placeholder { /* Mozilla Firefox 19+ */
		color: transparent;
		opacity:  1;
	}
	#login-section2 .collapse-btn {
		margin-bottom: 0;
	}

	/* STEP 3 */
	#zahlungen .zahlungen-konto,
	#zahlungen .zahlungen-papier {
		max-width: 460px;
	}

	/* STEP 4 */
	#verwaltung p {
		margin-bottom: 45px;
		max-width: 470px;
		text-align: center;
	}
	#verwaltung table.table-large {
		display: table;
	}
	#verwaltung table.table-small {
		display: none;
	}
	#verwaltung table,
	#verwaltung table.table-verwaltung tr {
		max-width: 470px;
		width: 100%;
	}
	#verwaltung #login-form8 table.table-large {
		display: none;
	}
	#verwaltung #login-form8 table.table-small {
		display: table;
	}
	#verwaltung #login-form8 table label {
		width: auto;
		margin-left: 0;
	}
	#verwaltung #login-form8 input,
	#verwaltung #login-form8 .column-group,
	#verwaltung #login-form8 select {
		margin-right: 0;
	}
	#verwaltung #login-form8 .width-100 .column-group {
		width: 100%;
	}
	#verwaltung #login-form8 .zugriffTime .just-start {
		justify-content: flex-start!important;
		margin-left: 20px;
	}
	#verwaltung #login-form8 .zugriffTime .just-end {
		justify-content: flex-end!important;
		margin-right: 20px;
	}
	#login-section2 #drittCollapse .form-group__button {
		justify-content: center!important;
		height: auto;
	}
	#login-section2 #drittCollapse .form-group__button button {
		margin: 0 10px;
	}

	/* Absolute Black Background */
	#login-section2 .absolute-blackBack h1 {
		width: 415px;
	}

}

/* MEDIA 720px */
@media(min-width: 720px) {

	/* GENERAL */
	h1 {
		font-size: 28px;
	}
	button {
		font-size: 14px;
	}

	/* STEP 4 */
	#verwaltung p {
		max-width: 570px;
	}
	#verwaltung #login-form8,
	#verwaltung #login-form8 table {
		max-width: 650px;
		width: 100%;
	}
	#verwaltung #login-form8 table.table-large {
		display: table;
	}
	#verwaltung #login-form8 table.table-small {
		display: none;
	}
	#verwaltung #login-form8 table.table-large thead tr th:nth-child(1) {
		width: 23.5%;
	}
	#verwaltung #login-form8 table.table-large thead tr th:nth-child(2) {
		width: 37.5%;
	}
	#verwaltung #login-form8 table.table-large thead tr th:nth-child(3) {
		width: 25.5%;
	}
	#verwaltung #login-form8 table.table-large thead tr th:nth-child(4) {
		width: 13.5%;
	}
	#verwaltung #login-form8 table.table-large .__zeiten {
		flex-wrap: wrap;
	}
	#verwaltung #login-form8 table.table-large .__zeiten div:nth-child(1) {
		flex: 1 1 100%;
		margin-bottom: 0.5rem;
	}
	#verwaltung #login-form8 table.table-large .__zeiten label {
		margin-right: 10px;
	}
	#verwaltung #login-form8 table.table-large .__zeiten .column-group {
		width: 60px;
	}
	#login-section2 #login-form8 p {
		margin: 25px auto 0 0;
	}
	/* Absolute Black Background */
	#login-section2 .absolute-blackBack h1 {
		width: 575px;
	}
	#login-section2 .absolute-blackBack .group-buttons {
		max-width: 380px;
	}

}

/* MEDIA 768px */
@media(min-width: 768px) {

	/* GENERAL */
	h1 {
		font-size: 30px;
	}

	/* Absolute Black Background */
	#login-section2 .absolute-blackBack h1 {
		margin-bottom: 55px;
	}

}

/* MEDIA 992px */
@media(min-width: 992px) {}

/* MEDIA 1024px */
@media(min-width: 1024px) {

	/*** GENERAL ***/
	h1 {
		font-size: 34px;
	}
	h2,h3 {
		font-size: 17px;
	}
	button.login-head__btn {
		display: none;
	}

	main {
		/*flex: 1 1 70%;*/
		flex: none;
		width: calc(100% - 265px);
	}

	/*** ASIDE ***/
	aside {
		display: block;
		/*flex: 1 1 30%;*/
		max-width: 265px;
		width: 100%;
		position: fixed;
		right: 0;
		z-index: 1000;
	}

	/* STEP 4 */
	#login-section2 #drittCollapse .form-group__button {
		margin-top: 2rem;
	}

	/* Absolute Black Background */
	#login-section2 .absolute-blackBack h1 {
		width: 100%;
	}

}

/* MEDIA 1366px */
@media(min-width: 1366px) /*and (min-height: 768px)*/ {

	/*** GENERAL ***/
	h1 {
		font-size: 40px;
	}
	h3,h4 {
		font-size: 21px;
	}

	/*** MAIN ***/
	main {
		/*flex: 1 1 calc(100% - 310px);*/
		width: calc(100% - 310px);
		min-height: 100vh;
	}
	main table {
		width: 100%;
		max-width: 470px;
	}
	form input.bordered_input {
		border-width: 1px;
		border-style: solid;
		height: 32px;
	}

	/* SECTION 1 */
	#login-section1 {
		/*height: calc(100vh - 163px);*/
		display: flex;
	}
	#login-section1>div {
		margin: auto;
		max-width: 225px;
		width: 100%
	}
	#login-section1 .login-head {
		margin: 0 auto 70px;
	}
	#login-section1 .form-group {
		margin-bottom: 2rem;
	}
	#login-section1 button {
		width: 100%;
	}
	#login-section1 button.white_border {
		border-color: #1e1e1e
	}
	#login-section1 .login-footer>div {
		margin: 45px auto;
	}

	/* SECTION 2 */
	#login-section2 .login-head {
		margin: 25px auto 25px 40px;
	}
	#login-section2 .login-head img {
		width: 155px;
	}
	#login-section2 .login-body .__steps:not(:first-child) {
		margin-top: 50px;
	}
	/*#login-section2 form {
		max-width: 400px;
		width: 100%;
	}*/
	#login-section2 form label {
	    display: block;
	    width: 40%;
	    margin: 0;
	    align-items: flex-end;
	}
	#login-section2 form input,
	#login-section2 form .column-group,
	#login-section2 form select {
		width: 60%;
	}
	#login-section2 form .column-group input,
	#login-section2 form .column-group select {
	    width: 100%;
	}
	#login-section2 #deinBuddyCollapse label,
	#login-section2 #dubistBuddyCollapse label,
	#login-section2 #drittCollapse label {
		display: block;
	}
	#login-section2 #drittCollapse .form-group__button {
		flex-direction: row;
		height: auto;
	}

	#login-section2 form .radio_button [type="radio"]:checked,
	#login-section2 form [type="checkbox"]:checked,
	#login-section2 form .radio_button [type="radio"]:not(checked),
	#login-section2 form [type="checkbox"]:not(checked) {
	  position: absolute;
	  left: -99999px;
	}
	#login-section2 form .radio_button [type="radio"]:checked + label,
	#login-section2 form [type="checkbox"]:checked + label,
	#login-section2 form .radio_button [type="radio"]:not(checked) + label,
	#login-section2 form [type="checkbox"]:not(checked) + label {
	  position: relative;
	  padding-left: 15px;
	  cursor: pointer;
	}
	#login-section2 form .radio_button [type="radio"]:checked + label:before,
	#login-section2 form [type="checkbox"]:checked + label:before,
	#login-section2 form .radio_button [type="radio"]:not(checked) + label:before,
	#login-section2 form [type="checkbox"]:not(checked) + label:before {
	  content: '';
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 15px;
	  height: 15px;
	  border: 1px solid #3DB9BF;
	  border-radius: 100%;
	  background: #fff;
	}
	#login-section2 form [type="checkbox"]:checked + label:before,
	#login-section2 form [type="checkbox"]:not(checked) + label:before {
	  border: 1px solid #1e1e1e;
	  border-radius: inherit;
	}
	#login-section2 form .radio_button [type="radio"]:checked + label:after,
	#login-section2 form [type="checkbox"]:checked + label:after,
	#login-section2 form .radio_button [type="radio"]:not(checked) + label:after,
	#login-section2 form [type="checkbox"]:not(checked) + label:after {
	  content: '';
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 15px;
	  height: 15px;
	  border: none;
	  border-radius: 100%;
	  background: #3DB9BF;
	  -webkit-transition: 0.25s ease;
	  transition: 0.25s ease;
	}
	#login-section2 form [type="checkbox"]:checked + label:after,
	#login-section2 form [type="checkbox"]:not(checked) + label:after {
	  border-radius: inherit;
	}
	#login-section2 form .radio_button [type="radio"]:not(checked) + label:after,
	#login-section2 form [type="checkbox"]:not(checked) + label:after {
	  opacity: 0;
	  -webkit-transform: scale(0);
	  transform: scale(0);
	}
	#login-section2 form .radio_button [type="radio"]:checked + label:after,
	#login-section2 form [type="checkbox"]:checked + label:after {
	  opacity: 1;
	  -webkit-transform: scale(1);
	  transform: scale(1);
	}
	#login-section2 .payment-logo img {
		height: 20px;
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
	}
	/* Rating Stars */
	#login-section2 #emplfehlen form .rating label {
		width: inherit;
	}
	#login-section2 form .rating > input { display: none; }
	#login-section2 form .rating > label:before {
	  margin: 3px;
	  font-size: 1.25em;
	  font-family: FontAwesome;
	  display: inline-block;
	  content: "\f005";
	}
	#login-section2 form .rating > .half:before {
	  content: "\f089";
	  position: absolute;
	}
	#login-section2 form .rating > label {
		color: #fff;
		float: right;
		-webkit-text-stroke-color: #3db9bf;
    -webkit-text-stroke-width: 1px;
	}

	#login-section2 form .rating > input:checked ~ label, /* show gold star when clicked */
	#login-section2 form .rating:not(:checked) > label:hover, /* hover current star */
	#login-section2 form .rating:not(:checked) > label:hover ~ label { color: #3db9bf;  } /* hover previous stars in list */

	#login-section2 form .rating > input:checked + label:hover, /* hover current star when changing rating */
	#login-section2 form .rating > input:checked ~ label:hover,
	#login-section2 form .rating > label:hover ~ input:checked ~ label, /* lighten current selection */
	#login-section2 form .rating > input:checked ~ label:hover ~ label { color: #32d2da;  }


	/* STEP 1 */
	#halloUser>div {
		height: calc(100vh - 170px);
	}
	/* STEP 2 */
	#kundendaten .form-group__button {
		margin: 60px auto 120px;
	}

	/* STEP 3 */
	#zahlungen p {
		margin-bottom: 32px;
	}

	#zahlungen .zahlungen-rechnung h3 {
		margin-bottom: 60px;
	}
	#zahlungen .zahlungen-rechnung,
	#zahlungen .zahlungen-sart,
	#zahlungen .zahlungen-konto {
		margin-bottom: 120px;
	}
	#zahlungen .zahlungen-sart .payment-logo {
		width: 340px;
	}
	#zahlungen .zahlungen-papier {
		margin: 0 auto 120px;
	}

	/* STEP 4 */
	#verwaltung h1 {
		margin-bottom: 0;
	}
	#verwaltung h3 {
		margin-bottom: 30px;
	}
	#verwaltung p {
		margin-bottom: 60px;
	}
	/*#verwaltung form button[data-toggle="collapse"] {
		margin: 0 auto 120px;
	}*/
	#verwaltung .radioField {
		width: 32px;
	}
	#verwaltung .radio_button {
		height: 15px;
	}
	#verwaltung table,
	#verwaltung table.table-verwaltung tr {
		max-width: 470px;
		width: 100%;
	}
	#verwaltung table th,
	#verwaltung table td {
		text-align: center;
	}
	#verwaltung table.marginBottom {
		margin-bottom: 45px;
	}
	.verwaltung-dritt #dritt {
		margin: 5px 9px 30px;
	}
	.verwaltung-zugriff {
		/* margin-top: 120px; */
		margin-top: 40px;
	}
	.verwaltung-zugriff .zugriffTable tr th:nth-child(1) {
		width: 170px;
	}
	.verwaltung-zugriff .zugriffTable tr th:nth-child(2) {
		width: 355px;
	}
	.verwaltung-zugriff .zugriffTable tr th:nth-child(3) {
		width: 160px;
	}
	.verwaltung-zugriff .zugriffTime {
		padding: 0;
	}
	.verwaltung-zugriff .zugriffTime input,
	.verwaltung-zugriff .zugriffTime select {
		padding: 4px;
		border-style: solid;
		border-width: 1px;
	}
	.verwaltung-zugriff .zugriffTime .column-group {
		max-width: 60px;
	}
	.verwaltung-zugriff .zugriffTime div.form-group {
		margin: 0;
		flex: 1;
	}

	#login-section2 #login-form8 {
		max-width: 845px;
	}
	#login-section2 #login-form8 button {
		margin: 25px 0 120px auto;
	}
	#login-section2 #login-form8 table {
		max-width: 100%;
	}
	#verwaltung #login-form8 table.table-large .__zeiten {
		flex-wrap: nowrap;
	}
	#verwaltung #login-form8 table.table-large .__zeiten div:nth-child(1) {
		flex: 1;
		margin: 0;
	}
	#login-section2 #login-form8 .select_field img {
		right: 5px;
	}
	#login-section2 #login-form8 .login8Bei .column-group {
		max-width: 125px;
		width: 100%;
	}
	.verwaltung-auswer {
		margin-bottom: 120px;
	}

	/* STEP 5 - STEP 6 */
	#login-section2 #emplfehlen form label {
			width: 30%;
	}
	#login-section2 #emplfehlen form input,
	#login-section2 #emplfehlen form .column-group,
	#login-section2 #emplfehlen form select {
		width: 70%;
	}
	#login-form9 {
		margin: 60px auto 120px;
	}
	#emplfehlen .text_area label {
		width: 25%;
	}
	#emplfehlen .text_area .column-group {
		width: 75%;
	}
	#emplfehlen .emplfehlen-media {
		margin: 120px auto;
	}
	#emplfehlen .emplfehlen-footer {
		margin-bottom: 120px;
	}

	/*** ASIDE ***/
	aside {
		/*flex: 1 1 310px;*/
		flex: none;
		max-width: 310px;
		width: 100%;
		height: 100vh;
		transition: .25s ease;
		box-shadow: -1px 1px 7px rgba(0,0,0,0.5);
	}
	aside p {
		margin: 0;
	}
	aside table tr {
		display: block;
		margin-bottom: 20px;
	}
	aside table tr:last-child {
		margin-bottom: 40px;
	}
	aside table tr td {
		font-size: 14px;
	}
	aside table tr td:nth-child(1) {
		width: 55px;
	}
	aside table tr td:nth-child(2) {
		padding-left: 40px;
	}
	.login-user__info {
		margin: 30px auto 25px 60px;
	}
	.login-user__info img {
		width: 55px;
		height: auto;
	}
	.login-user__info div:nth-child(2) {
		margin-left: 40px;
	}
	.login-user__status {
		margin: 0 auto auto 60px;
	}
	.login-user__menu {
		margin: auto;
		height: 375px;
	}
	.login-user__menu ul {
		margin: 0;
		padding: 0;
	}
	.login-user__menu ul li:not(:last-child) {
		margin-bottom: 20px
	}
	.login-user__menu ul li a {
		padding: 10px;
		color: #1e1e1e;
	}
	.login-user__menu ul li a:hover,
	.login-user__menu ul li a:focus {
		color: #3db9bf;
	}
	aside .black_line {
		margin: 0 auto 50px;
		width: 90%;
	}
	aside button {
		width: 150px;
	}

}

/* MEDIA 1920px */
@media(min-width: 1920px) {

	/*** GENERAL ***/
	h1 {
		font-size: 48px;
	}
	h2,h3 {
		font-size: 24px;
	}
	p,label, input, select, button {
		font-size: 16px;
	}
	button {
		height: 49px;
	}

	/*** MAIN ***/
	main {
		/*flex: 1 1 calc(100% - 435px);*/
		flex: none;
		width: calc(100% - 435px);
		min-height: 100vh;
	}

	/*** ASIDE ***/
	aside {
		/*flex: 1 1 435px;*/
		flex: none;
		max-width: 435px;
		width: 100%;
	}

	/* STEP 1 */
	#halloUser>div {
		margin-top: 85px;
	}

	/* STEP 4 */
	#verwaltung p {
		max-width: 650px;
	}

}