/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700|Open+Sans:300,400&display=swap');

html, body {  margin:0px; padding:0px; }

* {
	font-family: 'Open Sans', sans-serif;
	color: #58595B;
}

h1, h2, h3 {
	font-family: 'Montserrat', sans-serif;
	padding-bottom:0px;
	margin-bottom:0px;
	margin-top:10px;
}

h1 {
	font-size:3em;	
}

h2 {
	font-size:2em;
}

p {
	font-size:1.2em;
}

.muster1 {
	background-image: url("images/muster_1.png");
	background-repeat: no-repeat;
	background-position: right top;
}

.muster2 {
	background-image: url("images/muster_2.png");
	background-repeat: no-repeat;
	background-position: 600px bottom;
}

#banner {
	background-image: url("images/banner.jpg");
	background-repeat: no-repeat;
	height:150px;
	margin-bottom: 40px;
	border:1px solid #58595B;
}

#headercontainer {
	
	padding:5px;
	background-color:#adc9b8;
	height:220px;
}

header {
	margin-top:35px;
	color:white;
	height:160px;
	width:1200px;
	margin-left:auto;
	margin-right:auto;
	background-image: url("images/heriterra_logo.png");
	background-repeat:no-repeat;
	background-size: 160px;
	padding-left:195px;
}

footer {
	width:1200px;
	margin-left:auto;
	margin-right:auto;
	padding-bottom:60px;
}

footer p {
	width:700px;
}

footer img {
	
	width:400px;
}
#content {
	margin-top:40px;
	width:1200px;
	margin-left:auto;
	margin-right:auto;
}

section {
	margin-bottom:205px;
}


.primary {
	color: #58595B;
}

.secondary {
	color:#a7a9ac;
}

header h1 {
	color:white !important;
}

header h2.secondary {
	color:#E1E1E1 !important;
}

.marken { width: 45%; padding-right:25px; }

.left { float:left; }
.right { float:right; }
.clear { clear:both; }
.center { text-align: center; }

img.rahmen {
	border:1px solid #58595B;
}

ul {
	list-style-type:none;
	margin:0px;
	padding:0px;
	padding-top:25px;
}

ul li {
	font-size:1.2em;
	padding-left:190px;
	height:200px;
	background-repeat: no-repeat;
	float:left;
	width:30%;
}

.gelb {
	background-image: url("images/essen.png");
}

.rosa {
	background-image: url("images/kosmetik.png");
}

.grau {
	background-image: url("images/produkte.png");
}

.braun {
	background-image: url("images/landwirtschaft.png");
}

.gruen {
	background-image: url("images/tourismus.png");
}

.gallerie {
	margin-top:50px;
	margin-left:100px;
}

.gallerie div {
	float:left;
	margin-right:40px;
	margin-bottom:40px;
	background-image: none;
	height:400px;
}

.gallerie div.gruen {
	border: 15px solid #ADC9B8;
}

.gallerie div.gelb {
	border: 15px solid #F1D09F;
}

.gallerie div.rosa {
	border: 15px solid #EFC2B3;
}

.gallerie div.grau {
	border: 15px solid #BBBBBB;
}

.gallerie div.braun {
	border: 15px solid #C49A81;
}

.partnerliste {
	margin-top:90px;
}

.partnerliste div {
	float:left;
	margin-right:40px;
	margin-bottom:40px;
	vertical-align: bottom;
	height:180px;
}

.partnerliste div img {
	height:100px;
}

.brandbook {
	margin-top:50px;
}

.brandbook img {
	border: 1px solid #58595B;
	margin-right:30px;
}

.projektpartnerliste {
	list-style-type:none;
	margin-top:0px;
	padding-top:10px;
}

.projektpartnerliste li {
	float:none;
	width:auto;
	height:auto;
	padding-left:none;
	padding:15px;
}

#cookieinfo {
	position:fixed;
	background-color:white;
	padding-left:15px;
	padding-right:15px;
	width:250px;
	top:25px;
	right:25px;
	bottom:auto;
	left:auto;
	border:1px solid silver;
	font-size: 12px;
	-webkit-box-shadow: 0px 4px 27px 2px rgba(168,163,168,0.76);
-moz-box-shadow: 0px 4px 27px 2px rgba(168,163,168,0.76);
box-shadow: 0px 4px 27px 2px rgba(168,163,168,0.76);
}

#cookieinfo a {
	color:gray;
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
	
	#cookieinfo {
		position:static;
		width:96%;
		margin-left:auto;
		margin-right: auto;
		top:5px;
		left:15px;
		right:auto;
		bottom:auto;
		background-color:white;
	}
	
	header, footer, footer p, #content {
		width:97%;
	}
	
	#content {
		padding:15px;
	}
	
	header {
		
		width:80%;
	}
	
	footer div {
		float:none;
	}
	
	img.mobilschmal {
		width:95%;
	}
	
	.gallerie {
		margin-left:20px;
	}
	
	.gallerie div {
		margin-right:30px;
		margin-bottom:30px;
		height:400px;
	}
}