body {
        font-family: 'Source Sans Pro', sans-serif;
	      /*margin: 10px auto;
	      max-width: 60em;*/
        font-family:Sans-Serif;
    	}

    	* {
    	  padding: 0em;margin:0em;
    	}

      em {
        color:#FF5035;
      }

      a         {color:##3F5765;}
      a:link    { color:##3F5765; }
      a:visited { color:#BDD4DE; }
      a:focus   { color:#2B3A42; }
      a:hover   { color:#FF5035; }
      a:active  { color:#FF5035; }

    	header{
    	  background-color: #2B3A42;
        color:#EFEFEF;
        text-align: center;
        height: 8em;
        width: 100%;
      }

      header div{
        margin-top:0em;
        margin-left: auto;
        margin-right: auto;
        height:7em;
        vertical-align: middle;
        font-size:4em;
      }


      header img{
        height:5em;
        margin-top:1.5em;
      }

    	footer{
        /*position:absolute;*/
        margin-top:3em;
        width:100%;
    	  background-color: ##3F5765;
        padding-top:2em;
        padding-bottom:0em;
        bottom:0;

    	}

      footer a         { color:#BDD4DE; }
      footer a:link    { color:#BDD4DE; }
      footer a:visited { color:#BDD4DE; }
      footer a:focus   { color:#BDD4DE; }
      footer a:hover   { color:#FF5035; }
      footer a:active  { color:#FF5035; }

    	main{
    	  background-color: #BDD4DE;
        display: flex;
        flex-flow: row wrap;
        /*overflow:scroll;*/
    	}

      header, nav, footer {
      }

      .box{
        background-color:#EFEFEF;
        line-height:1;
        margin:1em;
        padding:0em;
        min-width:18em;
        flex: 1 1 20%;
        position:relative;
      }

      div.more {
        position:absolute;
        bottom:0px;
        left:1em;
        margin-top:1em;
      }

      div.box ul{
        margin-bottom:1.5em;
      }
      
      div.box h1{
        color:#EFEFEF;
        text-shadow: 0 0 5px #2B3A42;
        margin-top:-1.5em;
        margin-bottom:1em;
        text-align: center;
      }
      
      div.box a{
        margin-left:0em;
        font-size:small;
        text-decoration: none !important; 
        color:#313131 !important;
      }
      
       div.box:hover{cursor: hand;
    cursor: pointer;
    opacity: .8;}
    
    a.divLink {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        text-decoration: none;
        /* Makes sure the link doesn't get underlined */
        z-index: 10;
        /* raises anchor tag above everything else in div */
        background-color: white;
        /*workaround to make clickable in IE */
        opacity: 0;
        /*workaround to make clickable in IE */
        filter: alpha(opacity=0);
        /*workaround to make clickable in IE */
    }
    
    #bb1, #bb2, #bb3, #bb4, #bb5, #bb6{
        height:8em;
        width:100%;
        margin:0em;
        background-size:cover;
        background-position: center;
        background-repeat: no-repeat;
      }
    
      #bb1 {
        background-image: url('banner1.jpg');
      }
      
      #bb2 {
        background-image: url('banner2.jpg');
      }
      
      #bb3 {
        background-image: url('banner3.jpg');
      }
      
      #bb4 {
        background-image: url('banner4.jpg');
      }
      
      #bb5 {
        background-image: url('zertifikat2.jpg');
      }
      
      #bbX {
        color:#2B3A42;
      }
      
      #bb6 {
        background-image: url('banner6.jpg');
      }

      #mainhook{
        min-width:60px;
        height:10em;
        background-size:cover;
        background-position: center;
	      background-repeat: no-repeat;
        background-image: url('banner.png');
        margin-bottom:1em;
        align-self: center; flex: 3 1 100%;
      }



.legal a         { color:#2B3A42; }
.legal a:link    { color:#2B3A42; }
.legal a:visited { color:#2B3A42; }
.legal a:focus   { color:#2B3A42; }
.legal a:hover   { color:#FF5035; }
.legal a:active  { color:#FF5035; }

      .legal {
        background-color: #EFEFEF;
        color:#2B3A42;
        padding-top:0.5em;
        padding-bottom:0em;
        padding-left:1em;
        padding-right:1em;
        text-align:center;
        font-size:small;
        margin-top:1em;
        min-height: 1.5em;
        bottom: 0px;
      }

footer ul{position:relative;}

footer li:before{content:'•';padding-right:2em;}


      footer ul li
     {
     display: inline;
     float:center;
     padding-left: 2em;
     }

     footer ul li:first-child:before{
      content:'';padding-right:0em;
     }



      nav {
        position:absolute;
        left:2.5em; top:3em; height:2em; width:2em;
        background-image: url("menu.svg");
        background-size:cover;
        background-position: center;
	      background-repeat: no-repeat;
      }

      nav  li ul{
       list-style:none;
       text-align:center;

       /* This is important for the show/hide CSS animation */
       max-height:0px;
       overflow:hidden;

       -webkit-transition:max-height 0.4s linear;
       -moz-transition:max-height 0.4s linear;
       transition:max-height 0.4s linear;
   }
   nav > ul > li{ /* will style only the top level li */
       list-style: none;
       display: inline-block;
       line-height: 1;
       margin-left: -0.7em;
       position:relative;
   }

   .box ul {list-style-type: none; margin:1em;}
   
   .box li {margin-bottom:1em;}

nav li ul li{
    background-color:#313131;
}

Nav li:hover ul{
    max-height:28em;
}

nav > ul > li > a{
    color:inherit;
    text-decoration:none !important;
    font-size:24px;
    padding: 25px;
}

nav li ul li a{
    padding:12px;
    color:#EFEFEF !important;
    text-decoration:none !important;
    display:block;
}

/*nav li ul li:nth-child(odd){
    background-color:#363636;
}
*/

nav li ul li:hover{
    background-color:#444;
}

nav li ul li:first-child{
    border-radius:0.7em 0.7em 0 0;
    margin-top:1em;
    position:relative;
}

/* the pointer tig*/
/*nav li ul li:first-child:before{
    content:'';
    position:absolute;
    width:1px;
    height:1px;
    border:5px solid transparent;
    border-bottom-color:#313131;
    left:50%;
    top:-10px;
    margin-left:-5px;
}*/

nav li ul li:last-child{
    border-bottom-left-radius:0.7em;
    border-bottom-right-radius:0.7em;
}


.half {min-width:10em;
        flex: 2 2 40%;   text-align: right;  }
        
        .quart {min-width:10em;
                flex: 1 1 20%;   }      
.row {        display: flex;
        flex-flow: row wrap;}
        
.row > * {
  padding :1em;
  
		}
    
    .quart p {margin-bottom:0.7em;}
    
    .maincontent {
              background-color:#EFEFEF;
              line-height:1;
              margin:1em;
              padding:1em;
              min-width:18em;
              flex: 1 1 100%;
    }
    
    
    .maincontent p {margin-bottom:0.7em;}
    
    .maincontent h1 {margin-bottom:0.7em;}
      .maincontent h2 {margin-bottom:0.5em;}
        .maincontent h3 {margin-bottom:0.35em;}
    
    .maincontent ul {margin:1em;}
    
    
    .maincontent >  ul > li {margin-bottom:0.8em;}
    
    /*
		.row:after {
			content: '';
			display: block;
			clear: both;
			height: 0;
		}

		.row:first-child > * {
			padding-top: 0 !important;
		}

		.row.uniform > * > :first-child {
			margin-top: 0;
		}

		.row.uniform > * > :last-child {
			margin-bottom: 0;
		}


			.row.half > * {

				padding-left: 20px;
			}

			.row + .row.half > * {
	
				padding: 20px 0 0 20px;
			}

			.row.half {

				margin-left: -20px;
			}

			.row + .row.uniform.half > * {
	 
				padding: 20px 0 0 20px;
			}
    */