html, body {height: 100vh; margin:0;}
body {
	display: flex;
display : -ms-flexbox;
flex-flow: column; 
align-items : stretch; 
align-content : space-between;
margin: 0; 
font-family: 'Work Sans', sans-serif; 
color:#555;
font-size: 100%; 
line-height: 1.5rem; 
font-weight: 400; 
background: #efefef; 
letter-spacing:.02em;
	
}
.page {height: 50vh;}
#container {flex:1; margin:auto;  background: #fff; }

/* Extra small devices (phones, 600px and down)margin:0.6em 1em 1em 1em; */

@media only screen and (max-width: 599px) {
 #kopf, #navbar {display:none}
     #container { word-wrap: break-word; margin-top: 2rem; padding: 1rem; }
     .flex-header { 
  display: flex;
  width: 100%; margin:auto;
	padding-top: 0rem;
  flex-direction: row;
  justify-content: space-between;
 
  
  } 
.flex-header > div {
	height:50px;
  font-size: 1.2rem;
   color: white;
  margin: 0;
  background-color:#fdb403;
}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (max-width: 820px) {
  #kopf, #navbar {display:none}
    #container {word-wrap: break-word;margin-top: 2rem; padding: 1rem;} 
    .flex-header { 
  display: flex;
  width: 100%; margin:auto;
	padding-top: 0rem;
  flex-direction: row;
  justify-content: space-between;
 
  
  } 
.flex-header > div {
	height:50px;
  font-size: 1.2rem;
   color: white;
  margin: 0;
  background-color:#fdb403;
}

}



@media only screen and (min-width: 821px){
   .offcanvas {display:none}
   #container { word-wrap: break-word; margin-top: 10rem; padding:0.6em 0.8em 1em 0.8em;}
   
   .inside {padding: 0 1rem}
   .flex-header { 
  display: flex;
  width: 769px; margin:auto;
	
  flex-direction: row;
  justify-content: space-between;
  } 
  
.flex-header > div {
	height:50px;
  font-size: 1.2rem;
   color: white;
  margin: 0;
  background-color:#fdb403;
}

	
.flex-header > div:nth-child(odd) {
  width: 10%;
  }
     }

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 980px) {
 
    .offcanvas {display:none}
    #container {width: 900px; word-wrap: break-word; margin-top: 10rem;  padding:0.6em 0.8em 1em 0.8em;}
    
    .inside {padding: 0 1rem}
    
    .flex-header { 
  display: flex;
  width: 996px; margin:auto;

  flex-direction: row;
  justify-content: space-between;
  } 
  
.flex-header > div {
	height:50px;
  font-size: 1.2rem;
   color: white;
  margin: 0;
  background-color:#fdb403;
}

	
.flex-header > div:nth-child(odd) {
  width: 10%;
  }
   
  
}

/* Extra large devices (large laptops and desktops, 1200px and up)  margin:0.6em 4em 1em 4em;*/
@media only screen and (min-width: 1200px) {
.offcanvas {display:none}
#container { 
	width: 900px;
	word-wrap: break-word; padding-bottom: 2rem; 
	margin-top: 10rem;
/**	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	z-index: 1;
	**/
}
 .inside {padding:0 1rem }
.flex-header { 
  display: flex;
  width: 980px; margin:auto;
	padding-top: 0.5rem;
  flex-direction: row;
  justify-content: space-between;
 
  
  } 
.flex-header > div {
	height:50px;
  font-size: 1.2rem;
   color: white;
  margin: 0;
  background-color:#fdb403;
}

	
.flex-header > div:nth-child(odd) {
  width: 10%;
  }

}

/** flex kopf ***/
/**#header h1 {font-size: 1.4rem; font-family: 'Karla',sans-serif; font-weight: 400; letter-spacing:0.1rem; color: #fff; margin: 0; 
padding-top: 0.5rem;}**/
#header .linie {
    width:100%;
    height:88px;
    top:0;
    position:fixed;
    padding:0;
    background-color:#fdb403;
    /** border-left:1px solid #ccc;
    border-right:1px solid #ccc;
    background-color:rgba(242,240,233,0.5);
    **/
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    z-index:3;
	} 


/**** Hamburger Menue ***********/

.offcanvas h1 {font-family: 'Open Sans', sans-serif; 
font-size:1.8rem; 
     font-weight:400;}
#header .linie a {font-size: 2.5rem; text-decoration:none; color: crimson; padding: 95px 25px 0 25px;}
#header .linie a:hover {font-size:2.5rem; text-decoration:none; color: #555; background: #fff; padding: 55px 25px 0 25px;}
.mod_mmenuCustom a {font-size: 1.1rem;}

/**********************/
#container .top1 { justify-content: center; text-decoration:none; padding:1.2rem 0;}

/** flex footer ***/

.footer-flex {display: flex; justify-content: space-around; flex-wrap: wrap;
}
.footer-flex > div {
  
  width: 200px;
  margin: 0;
  
}

#footer .metanav {text-align: center}