body {
			font-family: 'Patua One', cursive;
			font-size: 18px;
			background-color: rgb(20, 20, 20);
			padding-left: 100px;
			padding-right: 100px;
			color: white;
			background-image: url("pexels-vishnu-r-nair-background.jpg");
			max-width: 980px;
			margin: auto;
			background-attachment: fixed;
						
		}
	
		.header-image {
			background-image: url("imagesfabs/kiezgarten1.jpg");
			
			min-height: 720px;
			object-fit: scale-down;
			xobject-position: 40% 25%;
			xdisplay: block;
			background-attachment: fixed;
			background-position: top;
			background-repeat: no-repeat;
		}
		
		.headerphone {
			width: 100%;
		}
		
		.image1 {
			width: 100%;
						
		}

		.headline {
			color: white;
		}
		
		.headline2 {
			color: rgb(150, 150, 150);
			font-size: 15pt;
		}
		
		.content {
			display: flex;
			justify-content: space-between;
		}
				
		.container1 {
			background-color: rgb(200, 200, 200);
			padding: 16px;
			color: black;
		}
		.container3 {
			paddingX: 50px;
			color: rgb(200, 200, 255);
			text-align: center;
		}
		.container2spaltig {
			margin-topx: 16px;
			display: flex;
			justify-content: space-between;
		}
		
		.halbespalte {
			width: 50%;
		}
		
		.navbar {
			text-align: center;
									
		}

		a {
			color: white;
			text-decoration: none;
			margin-right: 16px;
			
		}
		
		a:hover {
			text-decoration: underline;
			color: rgb(150, 150, 150);
			font-weight: bold;
		}
				
		.legal-content {
			padding: 8px;
		}
		
		.zoom {
			transition: transform .2s; /* Animation */
			margin: 0 auto;
		}

		.zoom:active {
			transform: scale(2.0); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
		}

.parallax {
  /* The image used */
  background-image: url("imagesparallax/Kurhaus2a.jpg");

  /* Set a specific height */
  min-height: 80vh;
  
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  
			
}
.parallax2 {
  /* The image used */
  background-image: url("imagesparallax/Heiko4.jpg");

  /* Set a specific height */
  min-height: 80vh;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  			
}
.parallax3 {
  /* The image used */
  background-image: url("imagesparallax/Kalli2.jpg");

  /* Set a specific height */
  min-height: 80vh; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
}

.parallax4 {
  /* The image used */
  background-image: url("imagesparallax/Heiko7.jpg");

  /* Set a specific height */
  min-height: 80vh; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
}

.parallax5 {
  /* The image used */
  background-image: url("imagesparallax/eppstein1.jpg");

  /* Set a specific height */
  min-height: 80vh; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
}
	
 /* Turn off parallax scrolling for all tablets and phones. Increase/decrease the pixels if needed */
@media only screen and (max-device-width: 1366px) {
  .parallax {
    display: none;
  }

} 

  	.headerphone {
	display: none;
	}

	
.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 0;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 20%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 4px;
  vertical-align: middle;
  width: 100%;
}

.column iframe {
  margin-top: 4px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 900px) {
  .column {
    flex: 45%;
    max-width: 50%;
  }
  body {
		padding-left: 10px;
		padding-right: 10px;
	}
	.container1 {
		margin-top: 0px;
		padding: 8px;
	}
	.header-image {
			display: none;
			xheight: 250px;
			xobject-fit: scale-down;
	}
	.headerphone {
			display: block;
	}
}

	
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
	body {
			padding-left: 10px;
			padding-right: 10px;
		}
	.column {
		flex: 95%;
		max-width: 100%;
		}
	.header-image {
			display: none;
			xheight: 250px;
			xobject-fit: scale-down;
		}
	.headerphone {
			display: block;
	}
	.parallax {
			height: 250px;
			object-fit: scale-down;
		}
	.parallax2 {
			height: 250px;
			object-fit: scale-down;			
		}
	.content {
			display: block;
			padding-left: 10px;
			padding-right: 10px;
		}
	}