/* html5 + CSS 3 Template created by MADAM MONOROM  2015 http://intensivstation.ch  */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600);
@import url("font-awesome/css/font-awesome.css");
/* ---------- reset -------------- */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
-moz-hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
-o-hyphens: auto;
	hyphens: auto; 
	}
header, footer, section, aside, nav, article, main { 
	display: block;
	}
html{ 
	font-size:100%;
	-webkit-text-size-adjust: none;
	}
/* ---------- basics -------------- */
body {
	background:#fff;
	font-size: 1em;
	color:#444;
	font-family: 'Open Sans', Arial, sans-serif;
	font-weight: 300;
	}
a {
	color: #5AB4CE;
	text-decoration:none;
	}
a:visited {
	color: #5AB4CE;
	}
a:hover {
	color: #000000;
	}
h1, h2 {
	font-size:2em;
	color: #5AB4CE;
    }
h3 {
	font-size:1.7em;
	color: #5AB4CE;
	}
h1, h2, h3 {
	font-weight: 300;
    margin: 0 0 15px;
    }	
img{
	border:none;
	}
ul{
	list-style-type:none;
	}
/* ----------container zentriert das layout-------------- */
.inner {
	padding: 25px;
	}
/* ----------header for logo-------------- */

header {
	background-color: #2f7d93;
}
header .inner{
 	background: url(images/stempel.png) no-repeat  bottom 10px right 15px; 
	}
header p{
	font-weight: 400;
	font-size: 0.9em;
} 	
header h1{
	font-size: 2.3em;
	font-weight: 400;

	} 	
header a, header a:visited {
	color: #fff;
}
/* ----------burger button-------------- */
.menubutton {
    font-size:1.1em;
    font-weight: 400;
    text-align:right;
    padding:10px 25px;
	background: rgba(110,110,14,1) url(images/stempel.png) no-repeat  center left; 
	}
.menubutton a{
    color: #fff;
	transition: all 0.5s linear;
    }
.menubutton a:not(:first-of-type){
    font-size:1.8em;
    }   
.menubutton a:first-of-type {
	margin:0 5px 0 0 ;
	}
	.fa-bars.active{
	display: none;
	}
.fa-times{
	display: none;
	} 
.fa-times.active{
	display: inline-block;
	}    
/* -------------- navigavtion------------- */
nav {
	font-size: 1.1em;
	}
nav li {
	background: #fff;
	}
nav .inner {
	padding: 0;
	}
nav ul {
	margin: 0;
	}	
nav a, nav a:visited {
	display: block;
	background-color: rgba(110,110,14,1);
	border-top:1px dotted #fff;
	color: #fff;
	padding: 5px 25px;
	position:relative;
	transition: all 0.5s linear;
	}
nav a:hover {
	color:#fff;
	background-color: rgba(110,110,14,0.5);
}
nav a:not(.selected):hover:after {
	position:absolute;
	right: 20px;
	font-size:1.8em;
	font-family: 'FontAwesome';
	content: "\f105";
	}
nav a.selected {
	color: #fff;
	background-color: rgba(110,110,14,0.7);
	}
/* ----------------- content--------------------- */
#content{
	padding-top: 25px;} 
p {
	padding:  0 0 20px;
	line-height:1.7em;
	}
ul{
	line-height:1.7em;
	margin:  0 0 20px;
	}
main a, aside a{
	font-weight:400;
	}
main a:hover{
	text-decoration:underline;
	}
main img{
	width:100%;
	}
/* -------------- side infos ------------- */
aside {
	background:rgba(110,110,14,0.1);
	font-size: 0.9em;
	}
aside img{
	width: 100%;
	}	
/* -----------footer--------------------------- */
footer.footer {
	background-color: #2f7d93;
	color:#fff;
	font-size: 0.9em;
	}
footer a {
	color: #ff0;
	}
/* -----------media queries --------------------------- */
@media screen and (min-width: 640px) {
header .inner{
 	background:
	 url(images/stempel.png) no-repeat  center right,
	 url() no-repeat  top right;
	}
.flex{
	display: -ms-flexbox;
	-ms-flex-direction: row;
	display: -webkit-flex;
	display: flex;
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	}
.flex article {
	width: calc(100% / 2 - 30px);
	-webkit-flex-grow: 1;
	-ms-flex-grow: 1;
	flex-grow: 1;
	-ms-flex-basis: auto;
	-webkit-flex-basis: auto;
	flex-basis: auto;
	border: 1px dotted  rgba(110,110,14,1);
	margin:0 20px 20px 0;
	padding:10px;
	}
	
.footer-segment {
	padding:0 20px 0 0;
	display: inline-block;
	vertical-align: top;
	}
.footer-segment {
	display: inline-block;
	vertical-align: top;
	width: calc(100% / 2 - 5px);
	padding:0 20px 0 0;
	}
}
/* -----------media queries --------------------------- */
@media screen and (min-width: 860px) {
.menubutton { 
	display: none;
 	}
nav ul:after{
	clear: left;
	content:' ' ;
	display: block;
	}
nav a:not(.selected):hover:after {
	content: " ";
	}	
nav{ 
	background-color: rgba(110,110,14,1);
	}
nav li{
	float:left;
	}
nav a {
	padding: 5px 20px 5px 20px;
	border-top:none;
	}
article{
	border-bottom: none;
	}
}	
/* -----------media queries --------------------------- */
@media screen and (min-width: 960px) {
.inner {
	max-width:1050px;
	margin: 0 auto;
	position:relative;
	}
.flex article {
	width: calc(100% / 3 - 40px);
	}
.footer-segment {
	display: inline-block;
	vertical-align: top;
	width: calc(100% / 4 - 5px);
	padding:0 20px 0 0;
	}
}