@charset "utf-8";
/* CSS Document */

body {
	background-color: #877777;
	color: #EEEDEB;
}

h1, h2, h3, h4 {
	font-family: 'Noto Serif Display';
	font-style: normal;
	font-weight: 300;
}
	
	h2 {
		font-size: 64px;
		text-align: center;
		vertical-align: middle;
		padding:25px 0;
		margin: 0;
		color: #EEEDEB;
	}
	h3 {
		font-size: 36px;
		text-align: left;
		vertical-align: middle;
		margin: 0 0 10px 0;
		color: #867675;
		padding:0 10px;
	}
	h4 {
		font-size: 36px;
		color: #EEEDEB;
		padding-bottom: 70px;
	}

@media screen and (min-width: 991px){
	h2 {
		font-size: 64px;
		text-align: center;
	}
	h3 {
		font-size: 36px;
		text-align: left;
	}
	h4 {
		font-size: 36px;
	}
	p {
	font-size: 24px;
	font-weight: 300;
	line-height: 36px;
	}
}
@media screen and (max-width: 991px){
	h2 {
		font-size: 32px;
		text-align: center;
	}
	h3 {
		font-size: 24px;
		text-align: left;
	}
	h4 {
		font-size: 24px;
	}
	p {
	font-size: 14px;
	font-weight: 300;
	line-height: 20px;
	}
}
/*Header/Banner*/
header {
	background: url("../media/Green-Hideaways-See.jpg") 50% 50% no-repeat;
	background-size: cover;
	height: 80vh;
	width: 100%;
	margin: 0;
	padding: 0;
	text-align: center;
}
p {
	text-align: center;
	vertical-align: middle;
	margin: 0;
	color: #EEEDEB;
	margin-bottom: 30px;
}

.logo {
	position: inline-block;
		padding-top: 35vh;
		margin: 0 auto;
		height: 91px;
		width: 620px;
}
@media screen and (max-width: 700px){
	.logo {
		width: 90% !important;
	}
}
/*Contentbereich*/
@media screen and (min-width: 1730px){
	article {
		text-align: center;
		padding:20px 0 20px 0;
		max-width: 1730px;
		align-content: center;
		margin: auto;
	}
}
@media (max-width: 1730px){
	article {
		margin: 0 10%;
		text-align: center;
		padding:20px 0 20px 0;
	}
}
@media screen and (max-width: 991px){
	article {
		margin:0px !important;
	}
}

article > p {
	text-align:center;
}

/*Galerie*/
	* {
		box-sizing: border-box;
	}
	
	.max-width {
		max-width: 1820px;
		margin-left: auto;
		margin-right: auto;
	}
	
	.max-width > .padding {
		padding-left: 5px;
		padding-right: 5px;
	}

	.flexbox {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
		margin-right: -12px;
		margin-left: -12px;
		padding: 0;
		text-align: left;
	}
	
	.flexbox-column {
		flex: 0 0 50%;
		max-width: 50%;
		padding-right: 12px;
		padding-left: 12px;
	}
	.txtimg {
		padding-right: 0px;
		padding-left: 0px;
		line-height:0;
	}
	.padding {
		padding:0px;
		margin:0px;
	}

	@media screen and (max-width: 991px){		
		.flexbox {
			flex-wrap: wrap;
		}
		.flexbox-column {
			flex: 0 0 100%;
			max-width: 100%;
		}
		
		.flexbox-column:not(:last-child){
			margin-bottom: 24px;
		}
	}
	.bild {
		width: 100%;
		height: auto;
	}
	.flexbox-column p {
		text-align: left;
		vertical-align: middle;
		text-align: justify;
		color: #0D2017;
		padding:0 15px;
	}

@media screen and (min-width: 1300px){	
	.flexbox-column p {
		font-size: 20px;
		line-height: 30px;
	}
}

@media screen and (max-width: 1300px){	
		.flexbox-column p {
		font-size: 14px;
		line-height: 20px;
	}
}
	.white{
		background-color: #EEEDEB;
		width:100%;
	}
	.whitecontent {
		padding:0px;
	}
/*Galerie Ende*/

/*Button*/

@media screen and (min-width: 992px){
	.hdimgcontainer {
		display: inline-block !important;
	}
}
@media (max-width: 991px) {
	.hdimgcontainer {
		display: none !important;
	}
}

@media screen and (min-width: 992px){
	.mobileimgcontainer {
		display: none !important;
	}
}
@media (max-width: 991px) {
	.mobileimgcontainer {
		display: inline-block !important;
	}
}

.button {
	background: #867675;
	border-radius: 4px;
	border: none;
	color: #EEEDEB;
	padding: 15px 32px;
	text-decoration: none;
	display: inline-block;
	font-size: 20px;
	font-weight: 400;
	margin:0 10px;
	font-family: 'Inter', sans-serif;
	margin-bottom: 10px;
}
.button:hover {
	background: #706464;
}

@media screen and (min-width: 992px){
	.btnheader {
		display: inline-block !important;
		float: right;
		margin-right:10%;
		margin-top:50px;
	}
	.btnmobileheader {
		display: none !important;
	}

}
@media (max-width: 991px) {
	.btnheader {
		display: none !important;
	}
	.btnmobileheader {
		display: inline-block !important;
		margin-top:100px;
	}
	.button {
		font-size:16px !important;
	}
	.flexbox-column {
		text-align: center !important;
	}
}