@media (min-width: 840px) and (max-width: 1080px) {
	#header .logo  {
		display: none;
	}
}
@media (min-width: 1080px) and (max-width: 1240px) {
	#header .logo img, #header .logo svg {
		height: 50px !important;
	}
}

#header .logo img, #header .logo svg {
	height: 128px;
}

#header {
	height: 8rem;
	border-color: #fff;
}

#header .navbar-section {
	height: 8rem;
}

#footer {
	background-color: #37505D !important;
}

#footer a, h3, h4 {
	color: #fff;
}

#footer h3, h4 {
	margin-top: 15px;
}

#footer h3 {
	font-weight:  bold;
}

#footer li {
	list-style-position: inside;
}


.desktop-menu nav:before {
	content: "Hallenbad Gro\0000DFkrotzenburg";
	color: #37505D;
	font-size: 30px;
}
#header.scrolled .desktop-menu nav:before {
	content: "";
}

.h-block {
	background-color: #DBE0E6;
	padding: 5px 25px 55px 25px;
	min-height: 450px;

}

.h-block.odd {
	background-color: #EBEBEF;
}

.h-block div {
	display: block;
	text-align: center;
	font-size: 19px;
	break-after: always;
	max-width: 1350px;
	margin: auto;
}

.h-img-container {
	float: left;
	min-height: 400px;
	padding-top: 10px;
}

.odd .h-img-container {
	float: right;
}

.h-img-container img {
	height: 350px;
	border-radius: 12px
}

.dropmenu ul li a {
	padding: 7px 20px 7px 0px;
  	transform: scaleX(0.9); /* >1.0 = erweitern, <1.0 = stauchen */
  	display: inline-block;  /* notwendig, damit transform funktioniert */
}
.dropmenu ul li a:only-child {
    padding-right: 7px;
}

#footer .title-section {
	height: 180px;
	float: left;
	text-align: left;
}

#footer .title-section h4 {
	color: rgb(172, 179, 194);
}

#footer .link-section {
	height: 180px;
	float: right;
	text-align: left;
	padding-right: 25px;
}

#footer .link-section li {
	list-style-type: none;
}

.login h1 {
	font-size: 30px;
}
.login h2 {
	font-size: 24px;
}
.login .buttons {
	margin-top: 20px;
}

.mobile-container .overlay.open {
	background-color: #37505D;
	color: #fff;
}

.mobile-container .overlay.open li {
	background-color: #37505D;
}

.mobile-container .overlay.open a {
	color: #fff;
}

.mobile-container .treemenu li a, .mobile-container .treemenu li a.active {
	color: #fff !important;
}

#data-table {
	display: none;
	visibility: hidden;
}