


@media (max-width: 1200px), (max-height: 775px) {
  section#home div#onScreen .bookend .bookendText {
    padding: 3em 10% 2em 10%;
  }
  section#home div#onScreen .bookend .bookendText p {
    font-size: 1rem;
  }
  section#home div#onScreen .bookend .bookendText h1,
  section#home div#onScreen .bookend .bookendText h2 {
    font-size: 2rem;
  }
  section#home div#onScreen div#intro div.buttonArrow .button {
    font-size: 1rem;
  }  
}

@media only screen and (max-width: 1120px){
	#panelContent #panelImg	{
		margin-left: 3%;
		margin-right: 3%;
	}
	header .logo {
		padding-left: 3%;
	}
	header .menu {
		padding-right: 3%;
	}
	
	footer {
		padding-left: 3%;
		padding-right: 3%;
	}
	#panelContent #panelImg .title {
		left: 3%;
	}
	
}

 
@media only screen and (max-width: 1023px) {
	body {
		font-size: 14px;
	}	
	#map {
	    width: 94%;
	}
	.contact-page .content-wrapper,
	.contact-page .underline {
		padding: 0 3%;
	}
	.form-wrapper {
		width: 100%;
	    float: none;
	    padding-right: 0;
	}
	.image-wrapper {
		width: 100%;
		float: none;
		margin-top: 2em;
	}
	.image-wrapper .image {
		margin-right: 5%;
		float: left;
		width: 40%;		
	}

	.image-wrapper  #teamCaption {
		float: left;
		width: 55%;
		padding-left: 0;
	}
	.about-us .pageTopImg {
		margin: 0 3% 3em;
	}
	.about-us .content-wrapper {
		padding: 0 3%;
	}
	.team-list section .section-content {
		padding: 33px 3% 40px;
	}	
}




@media (max-width: 1000px) {
	
	
ul.menu > li > .sub-wrap {
    position: relative;
    background: #fff;
    padding: 0;
    overflow: hidden;
}	
ul.menu .sub-wrap > ul > li a {
	color: #0074be;
}
ul.menu .sub-wrap > ul > li a:hover {
	color: #fff;
}

ul.menu .sub-wrap > ul {
    background: #ececed;	
}

ul.menu li:hover>div>ul {
    max-height: 0;
}
	
ul.menu > li > label  {
    display: block;
    position: absolute;
    top: 6px;
    right: 0px;
    padding: 8px;
    z-index: 900;
}

ul.menu > li > label > span {
    display: block;
    width: 26px;
    line-height: 4px;
    border-bottom: 2px solid  #0074be;
}

ul.menu > li > input:checked+div>ul {
    max-height: 800px;
    max-width: 100%;
    visibility: visible;
    opacity: 1;
    transition: none;
}

header .menu .panelLink {
	padding: 0;
}

header .menu .panelLink > a {
	padding: 15px 10px;
	display: block;
}
	
	
  header .menu {
    max-height: 0;
    transition: max-height 0.1s;
    width: 100%;
    text-align: center;
    clear: both;
    padding: 0;
    height: calc(100vh - 93px);
    overflow: auto;
  }
  header li {
    width: 100%;
  }  
  header ul.menu > li {
	  margin-top: 0;
	  display: block;
  }
	header {
		padding-bottom: 10px;
	}
	header .logo {
		padding-top: 1.3em;
	}
	header .logo > svg {
		width: 130px;
		height: auto;
	}  
  
  header .menu > li {
    background-color: white;
    border-top: 1px solid #c5c6c9;
    padding: 1rem;
    margin: 0;
  }
  header .menu li a {
    color: #0074be;
    font-weight: 600;
  }
  header .menu .panelLink.active, 
  header .menu .panelLink:hover {
	  border-bottom: none;
  }

  header label#hamburger {
    display: block;
  }	
	
  header .menuhover {
    border: none;
    background-color: #c5c6c9 !important;
  }
  header .menuhover a {
    color: white !important;
  }
  header .active {
    border: none;
    background-color: #0074be !important;
  }
  header .active a {
    color: white !important;
  } 
  footer {
	  padding-top: 1em;
	  padding-bottom: 1em;
  } 
  footer .address {
    float: none;
    text-align: center;
    font-size: 11px;
  }  
  footer .legalLinks {
    float: none;
    text-align: center;
  }  
  footer .legalLinks a {
	  font-size: 11px;
  }
  section#home div#onScreen div#intro {
    width: 100%;
  }  
  section#home div#onScreen div#intro div.buttonArrow {
    margin-top: 1em;
  }
  section#home div#onScreen div#intro div.buttonArrow .button {
    line-height: 1rem;
    width: 10em;
    padding: 1rem 1rem;
  }  
  section#home div#onScreen div#outro {
    width: 100%;
  }  

	
	#panelContent #panelInfo ul.tabs > li .hinweis {
		padding: 15px;
	}	  
  
}



@media only screen and (max-width: 850px) {
	.about-us .text-container .paragraph {
		width: 100%;
	}
	.about-us .text-container .image {
		float: none;
		margin-bottom: 1.5em;
		width: 100%;
	} 
	.submenu .subpage {
		width: 100%;
	}
}



@media (max-width: 750px) {
  section#home div#onScreen div#panels div.panelCont h4 {
    font-size: 1.5em;
  }
}



@media only screen and (max-width: 720px) {
	
	#panelContent #panelImg {
		height: 200px;
	}	
	#panelContent #panelImg h1 {
		left: 3.5%;
	}
	.team-list .info {
		font-size: 0.8em;
	}


}


@media screen and (max-width: 450px) and (max-height: 700px) {
  section#home div#onScreen .bookend .bookendText {
    padding: 0em 1.5em 2em 10%;
  }
  section#home div#onScreen .bookend .bookendText h1,
  section#home div#onScreen .bookend .bookendText h2 {
    font-size: 1.5rem;
  }
  section#home div#onScreen div#outro {
    margin-left: 15px;
  }  
}


/* Foundation Small */

@media only screen and (max-width: 639px) {
	
	body {
		font-size: 14px;
	}
	
	.about-us .pageTopImg {
		max-height: 200px;
	}
	.team-list .team {
		display: none;
	}
	.team-list .team.small {
		display: block; 
		width: 100%;
	}
	.team-list .team.small img {
		width: 100%;
	}
	.pageTopImg >.headline {
		font-size: 1.7rem;
	    bottom: 20px;
		left: 30px;
	}
		
	#map {
	    width: 90%;
	}
	.contact-page .content-wrapper,
	.contact-page .underline {
		padding: 0 5%;
	}
	.form-content {
		margin: 0;
	}
	.contant-form .half-width,
	.contant-form .full-width {
	    width: 100%;
		margin: 0;
	}
	.submenu .subpage .subpage-padding h4 {
		font-size: 1.5em;
	}
	.submenu .subpage .subpage-padding:hover .icon {
		top: -70px;
	}
	
	#panelContent #panelImg .title {
		font-size: 1.5em;
		word-break: break-all;
		bottom: 30px;		
	}
	h1 {
		font-size: 1.5625em;
	}
	h2, h3 {
		font-size: 1.45em;
	}	
	.blue-box > .column svg {
		max-width: 30px;
		height: auto;
	}
	#panelContent #panelInfo {
		margin-bottom: 130px;
	}
	#panelContent #panelInfo .right-image {
		margin: 3em auto;
		text-align: center;
	}
	footer .address .phone {
		display: block;
		margin: 5px 0 10px;
	}
	.margin-100 {
		margin-bottom: 50px;
	}
	section#home div#onScreen div#panels div.panelCont:before {
	    opacity: 0.6;
	}	
	section#home div#onScreen div#panels div.panelCont h4 {
	    opacity: 1;
	    bottom: 3.5%;
	}	
	section#home div#onScreen div#panels div.panelCont:hover h4 {
	    bottom: 3.5%;
	}	
	section#home div#onScreen div#panels div.panel {
		padding: 0 1em;
	}
	.section-content .downloads {
		padding: 9px;
	}
	.section-content .downloads .headline {
		margin: 10px 0 10px;
	}
	.section-content .downloads li {
		width: 100%;
		margin: 0 0 10px;
		
	}
	.team-list section {
		width: 100%;
		margin: 0;
	}
	.team-list section .section-content {
		padding: 33px 5% 40px;
	}
	.underline {
		margin-bottom: 10%;
	}
	.advice-padding {
		margin-right: 0;
		margin-left: 0;
	}
	.advice-padding > .ontop {
	    bottom: 0;
	}	
	.advice-padding .more-button {
	    opacity: 1;
	}
}

@media only screen and (max-width: 420px) {
	.image-wrapper img {
		padding-right: 0;
	    width: 100%;
	    float: none;
    }
    .image-wrapper #teamCaption {
	    float: none;
	    width: 100%;
    }
    h2, h3 {
	    font-size: 1.2em;
    }
    .image-wrapper #teamCaption {
	    padding-top: 0;
    }
    .kontakt .image-wrapper #teamCaption,
    .kontakt .image-wrapper .image {
	    width: 100%;
	    display: block;
    }
    .kontakt .image-wrapper .image {
	    margin-bottom: 20px;
    }
}


@media screen and (max-width: 39.9375em) {
  .guide-category-list .kategorie {
    padding: 0;
  }
}
