body, html {
  height: 100%;
  width: 100%;
}

h1{
	text-align: center;
}

.parallax {
  /* Set a specific height */
  height: auto;
  padding-top: 40px;
  padding-bottom: 40px;
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#parallax-pre {
	background-image: url('../img/pattern/blaetter.jpg');
  	background-repeat: repeat;
  	background-size: auto auto;
	color: #000;
}

#parallax-cgn {
	background-image: url('../img/pattern/gold.jpg');
}

#parallax-ham {
	background-image: url('../img/pattern/blaetter.jpg');
}

#parallax-post {
	background-image: url('../img/post.jpg');
}

.middlecontainer {
	max-width: 60%;
	margin-left: 20%;
	color: #808080;
	border: 0px solid #00FF00;
}

.middlecontainer .card-img-top{
	object-fit: cover; 
	max-height: 400px; 
}

.postcontainer {
	background-color: #fff;
	margin-top: 20%;
	margin-bottom: 20%;
	padding: 20px;
	border: 0px solid #808080;
	
}

.othercontainer {
	background-color: #fff;
	margin-top: 0%;
	padding: 10px;
	border: 0px solid #808080;
	
}

.conleft {
	max-width: 500px;
}


@media only screen and (max-width: 600px) {

	body{
		overflow-x: hidden;
	}
	
	.parallax {
	  width: 100%;
	  height: auto;
	  margin: 0px;
	  background-attachment: fixed;
	  background-position: center;
	  background-repeat: no-repeat;
	  background-size: cover;
	  border: 0px solid #EE5757;
	}
	
	#parallax-pre {
	}
	
	#parallax-cgn {
	}
	
	#parallax-ham {
	}
	
	#parallax-post {
	background-image: url('../img/pattern/gold.jpg');
}
	
	.middlecontainer {
		max-width: 100%;
		max-height: 100%;
		width: 100%;
		height: auto;
		padding-top: 0%;
		margin-left: 0%;
		color: #808080;
		border: 0px solid #00FF00;
	}
	
	.middlecontainer .card-img-top{
		max-height: 400px; 
	}
	
	.postcontainer {
		margin-top: 0%;
		padding: 20px;
	}
	
	.conleft {
		max-width: 100%;
	}

	.card-group{
		width: 100%;
		border: 0px solid #000;
	}
}