/*frogstyle html*/
*{margin:0; padding:0;}   

html{
	background-color: #515151; 

	font-family: verdana, arial, sans-serif;   
	
	font-size:14px; 
	color:#777;
}



 a{color:black;}

 a:hover,a:focus{color:rgb(49, 49, 49);}



#wrapper:before {
	top:3%;

	background:#f4f4f4;
	width:1400px;
	content:"";
	position:absolute;
	z-index:-1;}

#wrapper{
	position:relative;
	width:1400px;
  outline: 1px solid black;
 	border-top:none;
 	height:100%;
	 margin:3% auto;
	 background:#f4f4f4;
}
	
	#banner{
		
		background:#ccc;		
	}
	
	#banner img{
	width:100%;
	height:auto;
  margin-left:auto;
  margin-right:auto;
}

body{ 
   font-family: Verdana, Geneva, sans-serif;/*Schriftfamilie restliche Elemente */
   color: rgb(34, 34, 34); 
}


body>header{ 
position:relative;
}

nav ul{list-style:none;
  margin:0 auto;
  padding:0;
  background:#ccc;
  position:relative;
  }

  nav li{
    float:left;
    background:#ccc;
    width:19%;
    margin:0 0.5%;
    text-align:center;
    color:#000;
    transition:background-color 1.7s;
  }

  nav li a{
    
    display:block;
    padding:5px 1em;
    margin: 0 10px;
    color:inherit;
    font-size: 15px;
    text-decoration:none;
  }

/* 2. Ebene */
/* ausklappnavi verstecken */
  nav li ul{
    position:absolute;
    left:-9999em;
  }

  nav li:hover>ul, nav li:focus-within>ul {
	
    left:auto;
    width:inherit;
  }
  
  /* Listenpunkte in der 2. Ebene untereinander darstellen - nur bei Dropdown menu
  nav li li{
     width:100%;
     float:none; 
    margin:0;
    border-top:2px solid transparent;
    border-bottom:1px dotted #f3f3f3;
  }*/

  nav>ul>li:first-child,
  nav>ul>li:last-child{width:19%;}
  nav>ul>li:first-child{margin-left:0;}
  nav>ul>li:last-child{margin-right:0;}


  nav ul:after{
    content:"";
    display:table;
    clear:both;
  }

  nav li:hover {
    background:#f0f0f0;
    color:rgb(0, 0, 0)
  }

  .sub{
  position:relative;
  }
  nav .sub:hover ul{width:100%;}
  .sub:before{
  content:"";
  border:7px solid transparent;
  border-top-color:inherit;
  border-bottom:none;
  display:table;
  position:absolute;
  right:5px;
  top:12.5px;
  }

  .active,.active:hover,.active:focus{background:#f4f4f4; color:color:rgb(0, 0, 0);}

  .active.sub:before,.active.sub:hover:before,.active.sub:focus:before{border-top-color:inherit;}

   .close,.open{display:none;}

  @media screen and (max-width:600px){
    body{background-color: black;}
    nav li{float:none;
    width:auto;
    margin:0;
    padding:2px 0 1px;
    border-bottom:1px solid #000;
    text-align:center;
    }
    nav li li{
    
      width:auto;
      margin-left:30px;
      border-bottom-color:inherit;
      float:none;
      }
  
    nav>ul>li:first-child,
    nav>ul>li:last-child{width:auto;}
    nav li:last-child{border-bottom-color:transparent;}

    .sub:before{
    
      border:none;
    }
    .sub li a:before{
      content:">>" " ";
      font-size:50%;
      float:left;
      padding-top:2%;
      padding-right:5px;
      padding-left:7px;
      position:relative;
      left:-26px;
    }

    nav li ul{
      position:static;
      width:auto;
    }

    nav{
      position:fixed;
      top:0;
      left:0;
      right:0;
      margin:0;
      background:#000; 
    }
    /* Abstand in Höhe der Navigation damit beim Laden der Seite Inhalte nicht dahinter liegen */
    body{padding-top:54px;}

    /* Hamburger */
  .open{display:block;} 

  .open:target ~  .resp-menu,
  .resp-menu{
    /* abschneiden an Höhe und animieren*/
    max-height:0px;
    overflow:hidden;
    transition: max-height .6s ease-in-out, border 0.2s ease, transform 0.6s; 
    width:auto;
    border:0 solid;
    transform:scale(0.95);
  }
  
  /* Angaben für Transition*/ 
  .open:target ~  .resp-menu{
    max-height:50em;
    transition: all 2.5s ease-in-out, border 3.45s ease;
    border-top:8px solid #000;
    transform:scale(1);
  }

  .open:target ~ .close{display:block;}

  .open:target {display:none;} 

  .open, .close{
    width:2em;
    height:1.5em;
    overflow:hidden;
    margin-left:auto;
	padding-top:15px;
	padding-right:15px;
    transition:all 1s;
    color:rgb(255, 255, 255);
    }

  .open:hover,.close:hover{
    color:rgb(214, 214, 214);
  }  

  /* Darstellung Hamburger mittels Border */
  .open:before{
    content:"";
    border-top:3.1px solid;
    border-bottom:double 10px;
    display:inline-block;
    width:80%;
    padding:4px 0 0;
    }

    .close:before{
      content:"x";
      display:inline-block;
      width:80%;
      text-transform:capitalize;
      font-size:30px;
      line-height:22px;
    }

    nav:before{
      content:attr(title);
      color:#fff;
      float:left;
    }

  }

.col50 {

	width:50%;
	float:left;
	background:#f4f4f4;
	font-size:14px;
	height:100%
	  }
.col50 h1{
	font-size:15px;
	padding-left:15%;
	padding-top:15%;
  text-decoration: none;
	}
  .col50 h2{
    font-size:15px;
    padding-left:15%;
    padding-top:15%;
    text-decoration: none;
    text-align: left;
    }
.col50 p{padding:7% 15%;}
.col50 ul{padding:7% 25%;}
.col50 ul li{padding-bottom: 10px;}
.col50 *:last-child {padding-bottom:60px;}

.row {

	width:100%;
 
	background:#f4f4f4;
	font-size:14px;
	height:100%
	  }
.row h1,h2{
	font-size:15px;
	padding-top:10%;
  text-decoration: none;
  text-align: center;
	}


  
.row p{padding-top:5%;
     
      text-align: center;}
.row *:last-child {padding-bottom:50px;}



#footer {
	height:35px;
	width:100%;
	background: #ccc;
 	text-align:center;
	line-height:35px;
	font-size:14px;
	color:black;
	clear:both;}


#nav:after{
	content:"";
	display:table;
	clear:both;
	}