
/*******************************************************************************************/
										/** Breakpoint 980px **/
/*******************************************************************************************/

	@media (max-width: 980px){

	/*dummy-element, sichtbarkeit wird von javascript als 'mediaquery' ausgewertet*/
	#media-query{
		display: none;
	}

	::-webkit-scrollbar {
		display: none;
	}

	/*Fixsize box for logo*/
	#top {
		background-image: url("../bilder/header_background.png");
		width: 100%;
		max-height: 90px;
		margin: 0;
		padding: 0;
	}


	/*wichtig um Header Bild richtig zu zeigen*/
	#bgrci_link{
			width: 100%;

	}
	/*Löschen whiteSpace da den Space haben wir im echten Bild*/
	#bgrci_link a {
		padding-left: 62px;
	}

	/*Img Ausschalten*/
	#header_img img{
		display: none;
	}
	/*Relative positioniert um den Text anzupassen*/
	#header_img {
		width: 100%;
		height: 100%;
		position: relative;
	}
	#bildText{
		right: 5%;
	}


	/*HamburgerMenü rechts oben, gewisse Abstande*/

	.menu {
		float: right;
		display: flex;
		flex-flow: nowrap;
		height: 100%;
		align-items: center;
		font-family: Arial, Helvetica, sans-serif;
		color: #616a77;
		margin-right: 5%;

	}

	.menu img:hover {
		cursor: pointer;
	}

	/*space between Menü*/
	.menu img {

		display: block;
		width: 25px;
	}

	.hamburger, .cross {
		border: none;
		background-color:transparent;
		vertical-align: middle;
		cursor: pointer;

		/*Explorer hat kein inherit BC*/

	}

	p.main_menu {
		display: none;
	}


	/*Eine fixirte Größe für Menü*/
	#flex-container>nav {
		display: none;
		margin-left: auto ;
		margin-right: auto ;
		width: 100%;
		background-color: #004995;
		padding: 0px;
		position:inherit;
	}
	#flex-container>nav a{
		color:#ededed !important;
	}
	.menu_list-level-0{
		background-color: #004995;

	}

	.menu-list-level-0 a{
		margin:10px 0px;
		padding-left: 20px;
	}
	.menu_list-level-1{
		display: flex;
		flex-direction: row;
		flex-wrap:wrap;
		margin: 0px 0px;
		border-left:none;
	}

	/*Abstand von dem linken Rand*/
	.menu_list-level-1 a{
		padding-left: 40px;
		padding-right: 40px;
	}


	/* Aktiver Link mit space dadrunter*/

	.level-1-items {
		display: flex;
		align-items: center;
		width:100%;
		background-color: rgb(51,109,169);
		border-bottom: solid 1px rgba(0,63,80,1);
		margin: auto 0px;
	}
	.level-1-items a{
			margin: 10px 0px;
	}
	.level-1-items:last-child{
		border-bottom: 0px;
	}
	.level-0-items  {
		display: inline-block;
		width: 100%;
		padding: 0px 0px;
		border-bottom: solid 1px rgba(0,63,80,1);

	}

	.level-0-items .fa-angle-double-right
		{
		background-image: url("../bilder/double-angle-pointing-to-right.png");
		display: block;
		color: white;
		margin:17px 0px 0px 7px;
		float:left;
		z-index: 100;
		width: 7px;
		height: 7px;
		background-size: contain 
			

	}
	.rotate90 {

		transform: rotate(90deg);
	}


	/* Türkis level 0 links*/
	.main_menu_aktiv:child {

		background-color: #336da9;
	}
	.bottomPadding{
		padding: 10px 0px 0px 0px;
	}

	/*Changing the order of HeaderBild and Menü. First comes Menü then  Bild*/
	#flex-container{
		width: auto;
	}
	#flex-container>header{
		order:2;
	}
	#flex-container>nav{
		order:1;
		margin: 0 auto ;
	}
	#flex-container>section{
		order:3;
		width:100%;
		margin: 0px 62px;
	}

	#footer{
		width:auto;
	}
	#datenschutz{
			display: none;
	}
	#datenschutzFooter{
		display: inline-block;
		float: left;
		margin-left: 20px;

	}
	#datenschutzFooter a{
		color: black;
	}



	/* MenuIcon  for Future*/

	#nav-icon3{
	width: 34px;

	height: 31px;

	position: relative;

	margin: 50px auto;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	-o-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
	cursor: pointer;
	}

	#nav-icon3 span{
	display: block;
	position: absolute;
	height: 6px;
	width: 100%;
	background: grey;
	border-radius: 9px;
	opacity: 1;
	left: 0;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .25s ease-in-out;
	-moz-transition: .25s ease-in-out;
	-o-transition: .25s ease-in-out;
	transition: .25s ease-in-out;
	}




	/* Icon 3 */

	#nav-icon3 span:nth-child(1) {
	top: 0px;
	}

	#nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {
	top: 9px;
	}

	#nav-icon3 span:nth-child(4) {
	top: 18px;
	}
	/*OPEN*/
	#nav-icon3.open span:nth-child(1) {
	top: 9px;
	width: 0%;
	left: 50%;
	}
	/*OPEN*/
	#nav-icon3.open span:nth-child(2) {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	}
	/*OPEN*/
	#nav-icon3.open span:nth-child(3) {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
	}
	/*OPEN*/
	#nav-icon3.open span:nth-child(4) {
	top: 9px;
	width: 0%;
	left: 50%;
	}


	.textContainer p{
		font-size: 25px;
	}
}
/*******************************************************************************************/
										/** Breakpoint 600px **/
/*******************************************************************************************/

@media (max-width: 600px){

	.hide_kleiner_600{
		display: none;
	}
	/*Handy bracuht kein scrollbar */
	::-webkit-scrollbar {
		display: none;
	}
	.menu{
		margin-right: 2.5% !important;
	}
	.menu p{
		font-size: 26px;
	}

	/* Headerbild ausblenden*/
	#bild{
		display: none;
	}

	/*Um Headerbild zu skalieren*/
	#header_img img{
		display: block !important;
		width: 100%;
		object-fit: contain;
	}

	#bildText {
		font-size: 3em;
		background: rgba(255,255,255,0.69);
		border-radius: 7px 0 0 7px !important;
		right: 0px !important;
		padding: 5px 20px 5px 10px !important;
	}

	#content {
		margin: 0px 49px;
	}
	/*Unterweisungshilfen: Titel in Illustration*/
	.inhaltImg p{
		font-size: 18px;
		margin: 7px 0;
		margin-bottom: 5px;
	}

	/*Unterweisungshilfen: Container für Titel und Startbutton in Illustration*/
	.buttonContainer{
		background-color: rgba(255,255,255,0.7);
		border-radius: 8px;
		bottom: 10%;
		padding-right: 4%;
		padding-left:2%;
	}
	.floatleft{
		float: none;
		max-width: none;
	}
	/*Elemente in download-Tabellen umbrechen */
	.flex-download-container{
		flex-flow: wrap;
	}
	.medien_titel {
		width: 100%;
	}
	.impressum_titel {
		width: 100%;
	}

	.dokument_kuerzel{
		flex-grow: 1;
	}
	.dokument_titel {
		width: 100%;
		margin-top: 5px;
	}
	.dokument_symbol_rechts{
		order:2;
	}

	.button{
		padding-left: 0px;
	}

	.buttonRightGross{
		padding-top: 15px;
	}
	.contact-titel {
	width: 100%;
	margin-top: 5px;
	text-align: left;
}
	.contact-titel-person {

	width: auto;
}

}



/*******************************************************************************************/
										/** Breakpoint 400px **/
/*******************************************************************************************/

@media (max-width: 400px){
/*@media all and (max-width:400px)*/

	#bildText {
		font-size: 2em !important;
		background: rgba(255,255,255,0.69);
		border-radius: 7px 0 0 7px !important;
		right: 0px !important;
		padding: 5px 20px 5px 10px !important;
	}

	#bgrci_link{

		height: 16px;
	}

	#logo{
		width: 180px;
	}
	.menu img{
		width: 20px !important;
	}
	.menu p{
		font-size: 20px !important;
	}
	#content{
		margin: 0px 20px !important;
	}
	#bgrci_link a {
		padding-left: 20px!important;
	}
	/*Titel der Unteweisungshilfen im Image*/
	.inhaltImg p{
		font-size: 15px !important;
	}

	.buttonContainer{
			bottom: 10%;
		}


}
