@media only all and (max-width: 770px) {
	
	/* ------------------- Allgemein ------------------------- */
	
	body {
		font-size: 80%;
		line-height: 1.2;
		hyphens: auto;
		-ms-hyphens: auto;
		-moz-hyphens: auto;
		-webkit-hyphens: auto;
	}
	
	h1 {
		font-size: 1.6rem;
display: inline-block;
	}

.justify {
  text-align: left;
}


	h2 {
		font-size: 1.2rem;
display: inline-block;
	}

	h3 {
		font-size: 0.9rem;
	}
	
	/* ------------------- Struktur ------------------------- */
	
	.frame-outer {
		width: 100%;
   		font-size: 0.8rem;
	}
	
	.content {
		display: block;
		
	}
	.content1 {
		display: block;
	}
	.footer {
		display: block;
	}
	
	.box-left {
		width: 100%;
	}
	
	.box-right {
		width: 100%;
	}
	.flex {
  display: block;
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
               flex-wrap: wrap;
  flex-direction: row;
}

.left{
               width:100%;
}

.right{
               width:100%;
}

.one{
	 width:100%;
}
.two{
  width:100%;
}
.three{
	 width:100%;
}
.four{
	  width:100%;
}
.five{
	 width:100%;
}
.six{
	 width:100%;
}

.icons{
	font-size:0.7rem;
	text-align: left;
}

.icons img{
	display: none;
}
	
	.bogen {
	display:none;
}

.slogan_green{
	width: auto !important;
	position: inherit;
display: inline-block;
	top: auto;
	z-index: 2;
}

.slogan_blue{
	width: auto !important;
	position: inherit;
display: inline-block;
	top: auto;
}
.header{
	position: relative;
	z-index:1;
}
	
	/* ------------------- Elemente ------------------------- */
	
	.button a {
		display: block;
		margin: 2rem auto;
		padding: 0.8rem 2.5rem;
	}
	
	/* ------------------- Sichtbar/Verstecken ------------------------- */
	
	/* diese Klasse verwenden um etwas erst in der responsiven Ansicht sichtbar zu machen. */
	
	.show {
		display: contents;
	}
	
	/* diese Klasse verwenden um etwas erst in der responsiven Ansicht zu verbergen. */
	
	.hide {
		display: none;
	}
	
}
.refnr {}

.apply {}