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


/* alegreya-regular - latin */
@font-face {
  font-family: 'Alegreya';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/alegreya-v29-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/alegreya-v29-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/alegreya-v29-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/alegreya-v29-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/fonts/alegreya-v29-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/alegreya-v29-latin-regular.svg#Alegreya') format('svg'); /* Legacy iOS */
}
/* alegreya-800 - latin */
@font-face {
  font-family: 'Alegreya';
  font-style: normal;
  font-weight: 800;
  src: url('/fonts/alegreya-v29-latin-800.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/alegreya-v29-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/alegreya-v29-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/alegreya-v29-latin-800.woff') format('woff'), /* Modern Browsers */
       url('/fonts/alegreya-v29-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/alegreya-v29-latin-800.svg#Alegreya') format('svg'); /* Legacy iOS */
}


* {
	-webkit-box-sizing:border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;
}

html, body {
	height: 100%;
 	width:100%;
 	background:url(../img/bg-kresse.jpg) no-repeat top center fixed; 
   	-webkit-background-size: cover;
   	-moz-background-size: cover;
   	-o-background-size: cover;
   	background-size: cover;
	padding:0;
	margin:0;
}

#header {
	position:relative;
	background-color: rgba(255,255,255,0.85);
	box-shadow:#000 0 5px 15px;
}


#header-inside {
	position:relative;
	max-width: 1200px;
	margin:0 auto;
}

#logo img {
	position:relative;
	top:10px;
	width:200px;
	height: auto;
	padding-left: 25px;

}

#image-top {
	z-index:50;
	padding: 10px 25px;
}

#image-top img {
	-webkit-box-shadow: 4px 4px 10px #888;
	box-shadow: 4px 4px 10px #888;
    border:solid 10px #fff;
	height: auto;
}
	#content {
	padding:25px;
}
footer {
	background-color:rgba(0,101,151,0.70);
	padding: 50px 25px
}







/* ######################################### Große Bildschirme ############## */
@media only screen and (min-width:769px){
	#header-inside, #content, footer {
		display: -webkit-box;
   		display: -moz-box;
  		display: -ms-flexbox;
   		display: -webkit-flex;
 		display: flex;
	}
	
	#header {
		top:30px;
		height:210px;
	}
	
	#image-top img {
		width: 85%;
		max-width: 400px;
		
	}
	#image-top {
		position: relative;
		text-align: right;
	}
	#logo, #image-top, .footer-left, .footer-right {
		-webkit-box-flex: 1;
   		-moz-box-flex: 1; 
   		width: 50%; 
   		-webkit-flex: 1;
   		-ms-flex: 1;
   		flex: 1;
}

	
	#content-left {
	-webkit-box-flex: 2;
   	-moz-box-flex: 2; 
   	width: 66.6666%; 
   	-webkit-flex: 2;
   	-ms-flex: 2;
   	flex: 2;
	margin-right: 50px;
	}	
	#content-right {
	-webkit-box-flex: 1;
   	-moz-box-flex: 1; 
   	width: 33.3333%; 
   	-webkit-flex: 1;
   	-ms-flex: 1;
   	flex: 1;
	/*border: 1px solid #333;*/
	} 
	
	footer .footer-right {
	text-align: right;
}
} /* ende Große Bildschirme */




/* ######################################### KLEINE Bildschirme ############## */
@media only screen and (max-width:768px){
	#logo {
		width: 100%;
		text-align: center;
		padding-bottom: 25px;
		/*border: 1px solid #333;*/
	}
	#header {
		top:30px;
		height:auto;
	}
	#image-top img {
		width: 100%;
		max-width: 400px;
		
	}
	#image-top {
		position: relative;
		text-align:center;
	}
	
	
} /* Ende kleine Bildschirme */







#content-wrapper {
	position:relative;
	top:60px;
	max-width: 1200px;
	background-color:rgba(255,255,255,0.85);
	margin:0 auto;
	
	box-shadow:#000 5px 10px 15px;
	z-index:40;
}







/*  ##################### Schrift ################## */

body {
	font-family: 'Alegreya', serif;
	color:#00512d;
}

h1 {
	text-shadow:rgba(55,55,55,0.35) 1px 1px 5px;
	font-weight: normal;
	font-size: 3rem;
	color: rgba(254,38,38,1.00);
	margin-top: 0;
}

#content-right h2 {
	text-shadow:rgba(55,55,55,0.35) 1px 1px 5px;
	font-weight:700;
	font-size: 1.7rem;
	margin-bottom: 38px;
}

footer {
	color: #fff;
}



a:link { color:#00512d; }
a:visited { color:#00512d; }
a:hover { color:#f62b00; }
a:active { color:#f62b00; }






/* Inhalte */

.image-width-border img {
	width: 100%;
	height: auto;
	max-width: 100%;
	-webkit-box-shadow: 4px 4px 10px #888;
	box-shadow: 4px 4px 10px #888;
    border:solid 10px #fff;
	
	 display:inline-block;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1); 
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1); 
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1);
    transition: all 200ms ease-in;
    transform: scale(1);
	position: relative;
	z-index: 90;
}

.image-width-border img:hover {
	 -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.2);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.2);   
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.2);
    transition: all 200ms ease-in;
    transform: scale(1.2);
	z-index: 100;
}

#content-left .image-width-border img:hover {
	 -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.05);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.05);   
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.05);
    transition: all 200ms ease-in;
    transform: scale(1.05);
	z-index: 100;
}


.image-width-border p {
	text-align: right;
	margin: 0px 10px;
	font-size: 0.8rem;
	color: #777;
}

.image-width-border {
	display: -webkit-box;
   	display: -moz-box;
  	display: -ms-flexbox;
   	display: -webkit-flex;
 	display: flex;
	padding: 25px 0 25px 0;
}
.bild-flex {
	-webkit-box-flex: 1;
   	-moz-box-flex: 1; 
   	width: 20%; 
   	-webkit-flex: 1;
   	-ms-flex: 1;
   	flex: 1; 
}
.bild-flex-space {padding-right: 15px;}