@charset "utf-8";

/* Stylesheet Eulenpage - stand: 10.02.2014 - Von der Desktopansicht zum Handylayout*/
* { 
	padding: 0;
	margin: 0;
	font-family: 'minion pro';
	font-size: 1 em;
	color: #444;
	text-decoration: none;
	}

body {
	background-color: #fff; 
	}
	
#wrapper {
	width: 100%;
	max-width: 800px;
	height: auto;
	margin: 50px auto;
	background-color: #eee;
/*	-webkit-box-shadow: 0 0 10px #111;
   -khtml-box-shadow: 0 0 10px #111;
   -moz-box-shadow: 0 0 40px #111;
   -o-box-shadow: 0 0 10px #111;
	box-shadow: 0 0 40px #111;
    */}
    
.clearer {clear: both;}

/*################Links#########################################*/
a {
	color: #009be0;
	font-size: 15pt;
	}

/*###########################################desktopansicht###############################################*/

/*################kopfbox - desktop################################*/
#oberebox {
	width: 800px;
	height: 5em;
	position: relative;
	padding-top: 7%;
	}

/*################Logo: Eule - desktop##########################*/
header {
	position: absolute;
	top: -40px;
	left:30px;
	}
#logo {
	width: 100%;
	height: auto;
    margin-bottom: 3em;
    
     }

/*################navi - desktop################################*/
nav {
	width: 70%;
	float: left;
	padding-top: 0.5em;
	padding-left: 30%;
	background-color: #fff;
    margin-top: 3em;
	}
  
nav ul {
   list-style-type: none;
   margin: 0;
   padding: 0.8em 1em;
}

nav li {
  display: inline;
}

nav a {
	padding: 0.8em 0.5em; 
	color: #666;
	text-align: center;
	font-size: 0.8em;
	font-weight: lighter;
	letter-spacing:1px;
	}
	
nav a:hover, 
nav a:focus, 
nav a:active {
    color: #009be0;
    background-color:#555;
        -webkit-transition:all 0.5s ease-in-out;
	   -o-transition:all 0.5s ease-in-out;
	   -ms-transition:all 0.5s ease-in-out;
	   -moz-transition:all 0.5s ease-in-out;
	   transition:all 0.5s ease-in-out;
   }

/*################mittlere Box - desktop########################*/
#unterheader {
	width: 100%;
	height: auto;
	border-bottom: 0.2em solid #fff;
	background-color: #eee;
	}


/*################linke box - desktop###########################*/
#linkebox {
	width: 60%;
	height: auto;
	float: left;
	padding: 3% 5% 5% 5%;
	background-color: #eee;
	}

article {
	 -moz-column-count: 1;
    -webkit-column-count: 1;
    -o-column-count: 1;
    column-count: 1;
    
    -webkit-column-gap: 1em;
    -moz-column-gap: 1em;
    -o-column-gap: 1em;
    column-gap: 1em;
	}

.clearer {clear: both;}

#phone_button {
    width:20%;
    height: auto;
    padding-left: 5em;
    padding-top: 11%;
    float: left;
}

#mail_button {
    width: 30%;  
    height: auto;
    padding-top: 5%;
    float: left;
    }

#kon {
    -moz-column-count: 1;
    -webkit-column-count: 1;
    -o-column-count: 1;
    column-count: 1;
    }

h1 {
	font-size: 1.5em;
	font-weight: lighter;
	margin: 10px 0 2% 0;
	}
h2 {
	font-size: 1.2em;
	font-weight: lighter;
	margin-bottom: 5%;
	}
p {
	margin: 5px;
	line-height: 1.4;
	font-size: 1.5 em;
	}
.kursiv {
	font-size: 0.7em;
	font-style: italic;
	}

/*################rechte box - desktop##########################*/

#mind {
    height: auto;
    width: 100%;
    padding-top: 10%;
    margin-top: 33%;
    }

#naturschutz {
	float: left;
	width: 30%;
    height: auto;
	padding-top: 15px;
	}

h3 {
	margin: 2% 5% 5% 5%;
	font-family: Tahoma, sans-serif;
	color: #eee;
	font-size: 0.9em;
	letter-spacing: 0.1em;
	}

/*################eulenkinder - desktop#########################*/
#eulenkinder {
	width: 100%;
	max-width: 800px;
	height: auto;
	margin: 0.2em auto; 
	}

figure {
	width: 90%;
	height: auto;
	padding: 2em 5%;
	background-color: #eee;
	}

img.angepasst {
	width: 100%;
	height: auto;
	}
	
/*################fussbox - desktop#############################*/
footer {
	width: 100%;
	height: 6em;
	padding-top: 5%;
	background-color: #009be0;
	}
address {
	margin: 0 8%;
	font-size: 0.7em;
	font-style: normal;
	letter-spacing: 0.2em;
	line-height: 1.5em;
    
	}
address ul {
	list-style-type: none;
	}
address li {
	color: #ddd;
	}

/*###########################################handy- und tabletansicht###############################################*/

/*###########################################handy- und tabletansicht###############################################*/

/*###########################################handy- und tabletansicht###############################################*/

/*###########################################handy- und tabletansicht###############################################*/


/*###########################################handy- und tabletansicht###############################################*/

/*###########################################handy- und tabletansicht###############################################*/

/*###########################################handy- und tabletansicht###############################################*/
@media screen and (max-width: 800px) {
#wrapper {
	width: 100%;
	max-width: 800px;
	min-width: 500px;
	margin: 0;
	}
#logo {
	width: 80%;
	position: static;
	margin-top: 0.8em;
	}
    
nav {
	width: 100%;
	float: left;
	padding-top: 0.5em;
	padding-left: 30%;
	background-color: #fff;
    margin-top: 3em;
	}
  
nav ul {
   list-style-type: none;
   margin: 0;
   padding: 0.8em 1em;
}

nav li {
  display: inline;
}

nav a {
	padding: 0.8em 0.5em; 
	color: #666;
	text-align: center;
	font-size: 0.8em;
	font-weight: lighter;
	letter-spacing:1px;
	}
	
nav a:hover, 
nav a:focus, 
nav a:active {
    color: #009be0;
    background-color:#555;
    -webkit-transition:all 0.5s ease-in-out;
    -o-transition:all 0.5s ease-in-out;
    -ms-transition:all 0.5s ease-in-out;
    -moz-transition:all 0.5s ease-in-out;
    transition:all 0.5s ease-in-out;
   }
    
#naturschutz {
    display: none;
    }
    
#linkebox {
    width: 90%;
    margin-bottom: 2em;
    }   
}

@media screen and (max-width: 500px) {
    
body {
	background: none;
	overflow-y: scroll;
	overflow-x: hidden;
	}
    
#wrapper {
	width: 100%;
	max-width: 500px;
	min-width: 300px;
	padding-top: 20px;
	margin-top: 0;
	box-shadow: none;
	}
    
aside {
	display: none;
	}
	
/*########################kopfbox - handy, tablet##################*/	
#oberebox {
	position: static;
	width: 100%;
	height: 15em;
	padding-top: 1%;
	background-color: #eee;
	}
    
header {
	position: static;
	margin: 1%;
	}
	
/*################Logo: Eule - handy, tablet####################*/
#logo {
	width: 60%;
	position: static;
	margin: 0;
	}
	
/*################navi - handy, tablet##########################*/
nav {
	width: 100%;
	float: none;
	padding-top: 0;
	padding-left: 0;
	border-top: 5px solid #fff;
	background-color: #eee;
	}

nav ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
   }

nav a {
	padding: 0.8em 1em;
	letter-spacing:3px;
	border-bottom: 5px solid white;
	display: block;
	}

nav a:hover, 
nav a:focus, 
nav a:active {
   background-color: #555;
   color: #009be0;
        -webkit-transition:all 0.5s ease-in-out;
	   -o-transition:all 0.5s ease-in-out;
	   -ms-transition:all 0.5s ease-in-out;
	   -moz-transition:all 0.5s ease-in-out;
	   transition:all 0.5s ease-in-out;
   }
  
  
    
    
/*################mittlere Box - handy, tablet##################*/
#unterheader {
	height: auto;
    margin-top: 10em;
    background-color: #eee;
	}
	
/*################linke Box - handy, tablet#####################*/
#linkebox {
	width: 90%;
	height: auto;
	float: left;
	padding: 3% 5% 0 5%;
	background-color: #eee;
	}

article {
	 -moz-column-count: 1;
    -webkit-column-count: 1;
    -o-column-count: 1;
    column-count:1;
    
    -webkit-column-gap: 1em;
    -moz-column-gap: 1em;
    -o-column-gap: 1em;
    column-gap: 1em;
	}


/*################fussbox - handy, tablet#######################*/
footer {
	height: 7em;
	width: 100%;
	max-width: 460px;
    padding-bottom: 2em;
    padding-top: 2em;
}

}