html, body
	{
		height: 98%;
	}
	
	body
	{
		margin: 0px;
		padding: 0px;
  		background: #2056ac;
        /* font-family: 'Questrial', sans-serif; */
        font-family: 'questrialregular', sans-serif;
		font-size: 12pt;
		color: rgba(0,0,0,.6); 

	}
	
    footer
    {
        text-align: center;
        color: #ffffff;
    }
	
	#header h1
	{
		text-align: center;
        font-size: 2.8em;
        color: #FFF;
	} 
	

* ====================================================  LAYOUT  ==================================================== */

/* Mobile first ! alle Blöcke haben 100%, Navigation unten*/
.main  {
  padding: 2em 0;
  margin: 0em 0;
  background-color: #ffffff;
}

.cicons {
  padding: 1em 0;
  margin: 0em 0;
  background: #E3F0F7;
}
    


/* -----------------------------  NAVIGATION   -------------------------------*/

.flex-container-nav {
	display: flex;
    flex-direction: column;
    color: white;
	background: #2056ac;
    margin: 0em 10em;
    text-align: center;
    align-items: center; 
}

.flex-item-nav {
	flex-grow: 1;
}



.flex-item-nav {
	border-radius: .5em .5em .5em .5em;
	margin: .5em;
	padding: .5em;

}


.flex-item-nav a{
	font-weight: bold;
	text-align: center;
    color: white;
    text-decoration: none;
    vertical-align: middle;
}


.flex-item-nav a[aria-current="page"]{
 font-weight: bold;
 color: #2056ac ;
 background-color: #ffffff;
 display: inline-block;
 margin: 0em 0;
 padding: .5em .5em;
 border-radius: .5em;
}

.flex-item-nav a:hover,
.flex-item-nav a:focus {
  background-color: #ffffff;
  color: #2056ac;
  display: inline-block;
  margin: 0em 0;
  padding: .5em 1em;
  border-radius: .5em;
  text-decoration: none;
}

.flex-item-nav a:hover::after ,
.flex-item-nav a:focus::after{
  color: transparent;
}

/*-------------  Inhalt 2 Spaltig Bild links  ---------*/

.flex-container1 {
	display: flex;
    flex-direction: column;
	background: white;
    margin: 0em 0em;
    text-align: center;
    align-items: center; 
}

.flex-item1 {
	margin: .5em;

}

.flex-item1:nth-of-type(2){
  padding: 0em 1em 0em 1em;    
}

/*-------------  Inhalt 2 Spaltig Bild rechts  ---------*/

.flex-container2 {
	display: flex;
    flex-direction: column;
	background: white;
    margin: 0em 0em;
    text-align: center;
    align-items: center; 
}

.flex-item2 {
	margin: .5em;

}

.flex-item2:nth-of-type(1){
  padding: 0em 1em 0em 1em;     
}


/*-------------  Kontaktikons   ---------*/

.flex-contacticons {
	display: flex;
    flex-direction: column;
	background: #E3F0F7;
    margin: .5em 10em;
    text-align: center;
    align-items: center;
}

.flex-itemc {
	margin: .5em;

}

/* 2-Spaltenlayout mit breiterem aside */
@media screen and (min-width: 58em) {
  section {
    flex: 1 31%;  /* Diese Elemente erhalten eine Breite von 1/3.  */    
    margin: 1%;
  }
  onesection {
    flex: 1 98%;  /* Diese Elemente erhalten eine Breite von 1/3.  */    
    margin: 1%;
  }

    
    
}



/* 2-Spaltenlayout mit breiterem aside */
@media screen and (min-width: 45em) {
  .main {    
    background-color: white;
  }
  
  .cicons {
    background-color: #E3F0F7;
  }
  
  .flex-container-nav {
	display: flex;
    flex-direction: row;
  }
  
    .flex-container1 {
	display: flex;
    flex-direction: row;

    }
    .flex-container2 {
	display: flex;
    flex-direction: row;

  }
    .flex-contacticons {
	display: flex;
    flex-direction: row;

  }
}