@media screen and (max-width: 1460px){
	.table {
		flex-wrap: wrap;
	}

	.reverse {
		flex-direction: row;
	}

	div[class*='table-']{
		min-width: 100% !important; 
		width: 100% !important;
	}

	section.table {
		padding-left: 0em;
		padding-right: 3em;
	}

	section.table .table-60.top-margin {
		padding-top: 8em;
		padding-bottom: 5em;
		padding-left: 3em;
	}

	section.table .table-60	.table-text-left {
		max-width: 200px;
	}

	.no-margin {
	padding-bottom: 2em;
	}

	section.column .table-60{
		padding-bottom: 3em;
	}

	section {
		padding-left: 5em;
	}
}

@media screen and (max-width: 1360px){
	.card {
		min-width: 100% !important;
		max-width: 100% !important;
		padding-bottom: 80%;
	}

	.card-list--staff .card {
		min-width: calc(50% - 1.5em) !important;
		max-width: calc(50% - 1.5em) !important;
	}

	.card-list--staff.card-list .body .card:nth-child(3n) {
		margin-right: 1.5em;
	}

	section.card-list .card:hover .card-content:after {
		transform: scaleX(1) scaleY(1.1) translateX(0em);
	}

	section.table .table-40{
		padding-bottom: 80%;
	}

	section.card-list {
		padding-top: 0em;
	}

	section.column .table-40{
		width: 100%;
		padding-bottom: 80%;
	}
}

@media screen and (max-width: 1615px){
	.footer-text {
		display: none;
	}
}

@media screen and (max-width: 1080px)  {
	section {
		padding-left: 3em;
	}

	.overlay.scroll-whole .overlay-content, 
	.main-content .overlay-content {
		padding: 2em;
		width: calc(100vw - 100px);
	}

	.overlay.scroll-parts .scroll-content.overlay-content, 
	.main-content .scroll-content.overlay-content {
		/* padding: 2em 2em 2em 4em; */
		width: calc(100vw - 100px);
	}

	.overlay.scroll-whole .overlay-content .img-inflow{
	margin-left: -2em;
	width: calc(100% + 2em);
	}

	.overlay.scroll-whole .overlay-content .paragraph, 
	.main-content .overlay-content .paragraph {
		padding-left: 0em;
		padding-right: 6em;
	}

	.overlay.scroll-whole .overlay-content .table-content, 
	.main-content .overlay-content .table-content {
		padding-left: 0em;
		padding-right: 3em;
	}

	.overlay.scroll-parts .scroll-content.overlay-content {
		background-color: white;
		width: 100%;
	}

	.nonscroll-img {
		display: none;
	}

	section.card-list .symbol-card {
		min-width: 100% !important;
		max-width: 100% !important;
		padding: 5em 0em 2em;
	}

	.card-compact, .benefits .card-compact.small {
	    width: calc(50% - 1em);
	}

	.benefits .card-compact.large {
	    width: calc(100%);
	}
}

@media screen and (max-width: 800px){
	header nav.mobilenav {
		display: none;
	}

	section {
		width: 100%;
	}

	header nav.navigation {
		display: block;
		position: fixed;
		top: 0;
		right: 0;
		/*bottom: 2em;
		left: 2em;*/
		width: calc(100% - 2em);
		max-height: calc(100% - 2em);
		height: calc(100% - 2em);
		overflow: scroll;
		padding: 4.5em 1em 2em 1em;
		z-index: 50 !important;
		transform: translate(100%, -100%) translate(-4em, 4em) !important;
		transition: transform 0.6s cubic-bezier(0.8,0,0.2,1);
	}

	header nav .side-nav {
		display: none;
	}

	header nav .top-nav {
		position: relative;
		width: 100%;
		padding: 0;
		font-size: 2em;
		padding-top: 0em !important;
		text-align: right;
	}

	header nav .top-nav a {
		display: inline-block;
		text-align: right;
		margin: 0.5em 1em;
		position: relative;
		
	}

	header nav .top-nav a:after {
		position: absolute;
		top: 100%;
		width: 100%;
		content: "";
		height: 3px;
		left: 0px;
		background: white;
		transition: all 0.3s cubic-bezier(0.8,0,0.2,1);
	}

	header nav .top-nav a:hover:after {
		transform: translateY(5px);
	}

	header nav.navigation.open {
		transform: translate(0, 0) translate(0, 0) !important;
	}

	header .mobile-menu-btn {
		position: fixed;
		top: 1.35em;
		right: 1.1em;
		width: 1.8em;
		height: 1.3em;
		z-index: 55;
		display: block;
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		justify-content: space-between;
	}

	header .mobile-menu-btn span {
		width: 100%;
		min-width: 100%;
		display: block;
		height: 2px;
		background: white;
	}

	header nav.navigation.always {
		transform: translate(100%, -100%) translate(-4em, 4em) !important;
	}

	header nav.navigation.always.open {
	    transform: translate(0, 0) translate(0, 0) !important;
	}

	.card-compact, .benefits .card-compact.small  {
	    width: 100%;
	}
}

@media screen and (min-height: 850px){
	/* show gray square decoration in desktop nav bar */
	header nav.navigation.rotate,
	header nav.navigation.always {
		height: calc(100vh - 5em);
	}
}

@media screen and (max-width: 720px){
	.footer-box-pack {
		flex-wrap: wrap;
	}

	.card-list--staff .card {
		min-width: calc(100%) !important;
		max-width: calc(100%) !important;
	}

	.footer-box {
		margin-bottom: 2em;
	}

	.footer-funk {
		padding-top: 1em;
	}

	footer .footer-funk .body {
		margin-bottom: 1em;
	}

	footer .footer-impressum {
		margin-bottom: 1em;
	}

	footer {
		padding: 3em;
	}

	.paragraph.paragraph-columns {
		column-count: 1;
	}

	.fixed-nav {
		padding-top: 7em;
	}

	.img-box .img-wrapper.google-map {
		padding-bottom: 90%;
		width: 110%;
	}

	.main > div:first-child section, .main-content > div:first-child section.paragraph {
    	padding-top: 3em !important;
	}

	section.paragraph {
    	padding-bottom: 2em;
	}
	section.card-list {
    	padding-top: 0em;
    	padding-bottom: 2em;
	}

	.overlay-close-btn-2 {
	    top: 0em !important;
	}

	body div.main-content div.main section:first-child,
	body div.main-content div.main section:first-child.paragraph.headline-only {
		padding-top: 3em!important;
	}

	body div.main-content div.main.slim section:first-child,
	body div.main-content div.main.slim section:first-child.paragraph.headline-only {
		padding-top: 0em!important;
	}
}

@media screen and (min-width: 621px){
	.img-box .img-wrapper {
		padding-bottom: 45%;
	}
}

@media screen and (max-width: 620px){
	.card {
		padding-bottom: 120%;
	}

	.overlay.scroll-whole .overlay-content, 
	.main-content .overlay-content {
		padding: 3em 1.5em 1em 1.5em;
		width: 100vw;
	}

	.overlay.scroll-whole .overlay-content .paragraph,
	.main-content .overlay-content .paragraph {
		padding-left: 0em;
		padding-right: 0em;
	}

	.overlay.scroll-parts .overlay-content, 
	.main-content .overlay-content {
		padding: 3em 1.5em 1em 1.5em;
		width: 100vw;
	}

	.overlay.scroll-parts .overlay-content .paragraph,
	.overlay.scroll-parts .overlay-content .table-80,
	.overlay.scroll-parts .overlay-content .scroll-imgbox,
	.overlay.scroll-parts .overlay-content .list-simple.underlined,
	.overlay.scroll-parts .overlay-content .overlay-intro,
	.main-content .overlay-content .paragraph {
		padding-left: 0em;
		padding-right: 0em;
	}

	.overlay-close-btn-2 {
		top: 0em;
		right: 2em;
		font-size: 2em;
		padding: 0.5em;
		padding-right: 0.6em;
		background-color: rgb(246,246,246);
		color: rgb(0,151,169);
		height: 2em;
	}

	.scroll-parts .overlay-close-btn-2{
		top: 0em;
	}

	.overlay-close-btn-2 {
		left: auto;
	}

	.intro-img ~ .overlay-content {
		margin-top: -2em;
	}

	.overlay.scroll-whole .overlay-content .img-inflow{
	margin-left: -1.5em;
	width: calc(100% + 1.5em);
	}

}

@media screen and (max-width: 520px){
	body {
		font-size: 14px;
	}

	h1 {
		font-size: 2em !important;
	}

	footer {
		padding: 2em 1.5em 2em 1.5em;
	}

	section.hero .body {
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
		bottom: initial;
		right: initial;
	}

	section.hero {
		padding-top: 14em;
		height: auto;
		min-height: 100vh;
		max-height: auto;
	}

	.logo {
		top: 1em;
		left: 1.5em;
		max-width: calc(100vw - 8em);
	}
}

@media screen and (max-width: 400px){
	section {
		padding-left: 1.5em !important;
		padding-right: 1.5em !important;
	}

	section.contact {
		padding-left: 0em !important;
		padding-right: 0em !important;
		margin-bottom: 3em;
	}

	.main.slim {
		background: white;
	}

	.overlay-content section {
		padding-left: 0em !important;
		padding-right: 0em !important;
	}