/************ Kleiner Spatz 2023-11 ************/



body {
	font-family: Helvetica Neue, Helvetica, Arial, Verdana, sans-serif;
	font-size: 16px;
	line-height: 24px;
	font-weight: 300;
	text-align: justify;
	color: #444; 
	margin: 0;
	padding: 0;
	behavior:url("csshover.htc");
	text-decoration:none;
	text-size-adjust: none;
	-webkit-text-size-adjust: none;
	background-color: #BDE5FB;
	position: absolute;
	width: 1200px;
	left: 50%;
	margin-left: -600px;
	-moz-hyphens: auto;
	-o-hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	-hyphens: auto;
}

body a {
	text-decoration: none;
	color: #333; 
}

body a.active, body a:hover {
	color: #36C;
}

#HG-Verlauf {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-image: url(../pics/HG-Verlauf.png);
	background-size: contain;
	background-repeat: repeat-x;
	background-position: bottom;
	z-index: 10;
}



/************ Head ************/


#logo-spatz {
	position: absolute;
	float: left;
	width: 25%;
	height: auto;
	top: 20px;
	left: 48px;
	z-index: 99;
}

#logo-betreuung {
	position: absolute;
	width: 26%;
	height: auto;
	top: 115px;
	left: 42px;
	z-index: 98;
}

#logo-visual {
	position: absolute;
	width: 11.5%;
	height: auto;
	top: 20px;
	left: 1035px;
	z-index: 99;
}

#nav {
	position: relative;
	float: left;
	height: 40px;
	width: 490px;
	margin-top: 120px;
	margin-left: 450px;
	color: #3CF;
	z-index: 99;
}

#button {
	position: relative;
	float: left;
	height: 20px;
	padding: 15px 0 5px 0;
	background-color: #FFF;
	text-align: center;
	overflow: hidden;
	z-index: 99;
}

#button a {
	text-decoration:none;
	color: #3CF;
	line-height: 0;
}

#button a.active, #button a:hover {
	text-decoration:none;
	color: #36C;
	font-weight: 400;
}

.Aktuell, .Wir, .Haus, .Infos, .Fotos, .Kontakt {
	border-radius: 5px;
	margin-right: 5px;
}

.Aktuell {
	width: 75px;
}

.Wir {
	width: 65px;
}

.Haus {
	width: 75px;
}

.Infos {
	width: 80px;
}

.Fotos {
	width: 80px;
}

.Kontakt {
	width: 85px;
}

#sub-nav {
	position: relative;
	float: left;
	width: 95%;
	height: auto;
    margin: 0.5% 0 50px 5%;
	z-index: 95;
}

#sub-nav-button {
	position: relative;
	float: left;
	height: 35px;
	padding: 5px 0 5px 0;
	background-color: #90E4FF;
	text-align: center;
	line-height: 2em;
	overflow: hidden;
	z-index: 95;
}

#sub-nav-button a {
	text-decoration:none;
	color: #555; 
}

#sub-nav-button a.active, #sub-nav-button a:hover {
	text-decoration:none;
	color: #444; 
	font-weight: 600;
	letter-spacing: -0.5px;
}

.sub-nav-1, .sub-nav-2, .sub-nav-3, .sub-nav-4 {
	width: 23.34%;
	margin-right: 5px;
	border-radius: 5px;
}

.sub-nav-5, .sub-nav-6, .sub-nav-7 {
	width: 31.25%;
	margin-right: 0.5%;
	border-radius: 5px;
}

.sub-nav-8, .sub-nav-9 {
	width: 47%;
	margin-right: 0.5%;
	border-radius: 5px;
}

#middlediv {
  height: 35px;
  width: 100vw;
  padding: 0;
  margin: 0 auto;
  display: table-cell;
  vertical-align: middle;
}




/************ content ************/


#content {
	position: relative;
	float: left;
	width: 1200px;
	height: auto;
	margin-top: -10px;
	padding-top: 50px;
	padding-bottom: 10px;
	background-color: #FFF;
	border-radius: 5px;
	padding-bottom: 200px;
	z-index: 20;
}


#big-box {
	position: relative;
	float: left;
	width: 100%;
	height: auto;
	margin: 0;
}

#wide-text {
	position: relative;
	float: left;
	margin: 0 5% 0% 5%;
	width: 90%;
	z-index: 90;
}

#left-box {
	position: relative;
	float: left;
	width: 42.5%;
	height: auto;
	margin: 50px 0 0 0;
	padding: 0 2.5% 0 0;
}

.korrektur {
	top: -50px;
	left: 5%;
}

.korrektur3 {
	top: -50px;
	left: 5%;
}

.korrektur4 {
	top: -50px;
}

#right-box {
	position: relative;
	float: right;
	width: 42.5%;
	height: auto;
	margin: 50px 0 0 0;
	padding: 0 5% 0 2.5%;
}

.korrektur2 {
	top: -50px;
	left: 0px;
}

#text {
	position: relative;
	float: left;
	width: 100%;
	z-index: 90;
}

#left-text {
	position: relative;
	float: left;
	width: 48%;
	z-index: 90;
}

#right-text {
	position: relative;
	float: right;
	width: 48%;
	z-index: 90;
}

#right-pic-5 {
	position: relative;
	float: right;
	width: 48%;
	height: 320px;
	margin: 1% 0 1% 4%;
	z-index: 90;
}

#right-pic-5 img {
    position: absolute;
    opacity: 0;
    animation: 25s ease-in-out infinite;
}

#right-pic-5 img:nth-of-type(1) {
    animation-name: fade1;
}

#right-pic-5 img:nth-of-type(2) {
    animation-name: fade2;
}

#right-pic-5 img:nth-of-type(3) {
    animation-name: fade3;
}

#right-pic-5 img:nth-of-type(4) {
    animation-name: fade4;
}

#right-pic-5 img:nth-of-type(5) {
    animation-name: fade5;
}

#big-pic-5 {
	position: relative;
	float: left;
	width: 100%;
	height: 525px;
	margin: 0 4% 4% 0;
	z-index: 90;
}

#big-pic-5 img {
    position: absolute;
    opacity: 0;
    animation: 25s ease-in-out infinite;
}

#big-pic-5 img:nth-of-type(1) {
    animation-name: fade1;
}

#big-pic-5 img:nth-of-type(2) {
    animation-name: fade2;
}

#big-pic-5 img:nth-of-type(3) {
    animation-name: fade3;
}

#big-pic-5 img:nth-of-type(4) {
    animation-name: fade4;
}

#big-pic-5 img:nth-of-type(5) {
    animation-name: fade5;
}

@keyframes fade1 {
     0%, 10%, 100% {opacity:1;}
    20%, 90%       {opacity:0;}
}

@keyframes fade2 {
     0%, 10%, 40%, 100% {opacity:0;}
    20%, 30%            {opacity:1;}
}

@keyframes fade3 {
     0%, 30%, 60%, 100% {opacity:0;}
    40%, 50%            {opacity:1;}
}

@keyframes fade4 {
     0%, 50%, 80%, 100% {opacity:0;}
    60%, 70%            {opacity:1;}
}

@keyframes fade5 {
     0%, 70%, 100% {opacity:0;}
    80%, 90%       {opacity:1;}
}



#wide-pic {
	position: relative;
	float: left;
	width: 100%;
	height: auto;
	margin: 0 4% 4% 0;
	z-index: 90;
}

#left-pic {
	position: relative;
	float: left;
	width: 48%;
	height: auto;
	margin: 1% 4% 4% 0;
	z-index: 90;
}

#right-pic {
	position: relative;
	float: right;
	width: 48%;
	height: auto;
	margin: 1% 0 4% 4%;
	z-index: 90;
}

#left-pic-double {
	position: relative;
	float: left;
	width: 48%;
	height: auto;
	margin: 0 0 2% 0;
	z-index: 90;
}

#right-pic-double {
	position: relative;
	float: right;
	width: 48%;
	height: auto;
	margin: 0 0 2% 0;
	z-index: 90;
}

#link-pic {
	position: relative;
	float: left;
	width: 180px;
	height: auto;
	margin: 5px 20px 20px 0;
	border: thin solid #666;
    z-index: 90;
}

#maps-pic {
	position: relative;
	float: left;
	width: 100%;
	height: auto;
	margin: 0 0 0 0 ;
	z-index: 90;
}

#QR-Code {
	position: relative;
	float: right;
	width: 180px;
	height: 180px;
	margin-right: 0px;
	z-index: 95;
}

#CD {
	width: 200px;
	margin-left: 0%;
}





/************ INDEX-BLOG ************/


#frosch {
	position: absolute;
	width: 30%;
	height: auto;
    top: 400px;
    right: 5px;
	z-index: 99;
	overflow: hidden;
}

#aktuelles {
	position: relative;
	float: left;
	width: 50%;
	height: auto;
    background: url(../pics/HG-gelb.jpg);
	border-radius: 5px;
	margin: -7.5% 0 0 25%;
	padding: 1.5% 2.5% 5% 2.5%;
    text-align: center;
    color: #000;
	-moz-hyphens: none;
	-o-hyphens: none;
	-webkit-hyphens: none;
	-ms-hyphens: none;
	-hyphens: none;
    z-index: 90;
}

#blog-line {
	position: relative;
	float: left;
	width: 100%;
	border-top: thin solid #0FF;
	margin: 6% 0 5% 0;
}




/************ INDEX-SLIDER ************/


#box-slider {
	position: relative;
	float: left;
	width: 90%;
	height: 540px;
	margin: 0 5% 3% 5%;
	border-radius: 5px;
	background-image: url(../pics/pic-06.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	z-index: 90;
	overflow: hidden;
}

#box-slider img {
    position: absolute;
    opacity: 0;
    animation: 40s ease-in-out infinite;
}

#box-slider img:nth-of-type(1) {
    animation-name: fade1;
}

#box-slider img:nth-of-type(2) {
    animation-name: fade2;
}

#box-slider img:nth-of-type(3) {
    animation-name: fade3;
}

#box-slider img:nth-of-type(4) {
    animation-name: fade4;
}

#box-slider img:nth-of-type(5) {
    animation-name: fade5;
}


@keyframes fade1 {
     0%, 10%, 100% {opacity:1;}
    20%, 90%       {opacity:0;}
}

@keyframes fade2 {
     0%, 10%, 40%, 100% {opacity:0;}
    20%, 30%            {opacity:1;}
}

@keyframes fade3 {
     0%, 30%, 60%, 100% {opacity:0;}
    40%, 50%            {opacity:1;}
}

@keyframes fade4 {
     0%, 50%, 80%, 100% {opacity:0;}
    60%, 70%            {opacity:1;}
}

@keyframes fade5 {
     0%, 70%, 100% {opacity:0;}
    80%, 90%       {opacity:1;}
}





/************ TEAM ************/


#super-wide-text {
	position: relative;
	float: left;
	margin: 0 0 0% 5%;
	width: 95%;
	z-index: 90;
}

#team-links {
	position: relative;
	float: left;
	width: 40%;
	height: auto;
	margin: 10px 0 3w 0 ;
	padding: 0;
	text-align: center;
}

#team-rechts {
	position: relative;
	float: right;
	width: 40%;
	height: auto;
	margin: 10px 0 3vw 0 ;
	padding: 0;
	text-align: center;
}

#team-foto {
	position: relative;
	float: left;
	width: 100%;
	height: auto;
	margin: 0 0 5% 0;
	border: 1px solid #999;
}






/************ Bildergalerie Photoswipe ******************/




#galleries {
	position: relative;
	float: left;
	width: 100%;
	margin: 0 0 50px 0;
}




.inhalte-swipe li img { 
	display: inline; 
	width: auto; 
	height: 140px; 
	padding-top: 15px;
}

.gallery-swipe { 
	position: relative;
	width: 100%;
	white-space: nowrap;
	padding: 0;
	margin: 0;
}
.gallery-swipe ul {
	position: absolute;
	list-style: none;
	white-space: nowrap;
	padding: 0;
	margin: 0;
	list-style-position: inside;
}	

.gallery-swipe:after { 
	clear: both; 
	content: "."; 
	display: block; 
	height: 0; 
	visibility: hidden; 
}

.gallery-swipe li { 
	display: inline-block;
	position: relative;
	float: left;
	padding: 0;
	margin: 0;
	list-style: none; 
}

.gallery-swipe li a { 
	list-style: none; 
	display: inline;
	margin-left: 0; 
	margin-right: 0; 
	text-decoration: none; 
}

.gallery-swipe li img { 
	display: inline; 
	width: 340px; 
	padding: 10px;
}

/* For inline examples only */

#PhotoSwipeTarget { width: 100%; height: 200px; }

#Indicators { text-align: center; margin-top: 20px; }
#Indicators span { display: inline-block; height: 10px; width: 10px; margin: 0 10px 0 0; padding: 0; -webkit-border-radius:5px; -moz-border-radius:5px; -o-border-radius:5px; border-radius:5px; background: #c5c5c5; overflow:hidden; }
#Indicators span.current{ background: #EEBF02; }


/*
 * photoswipe.css
 * Copyright (c) %%year%% by Code Computerlove (http://www.codecomputerlove.com)
 * Licensed under the MIT license
 *
 * Default styles for PhotoSwipe
 * Avoid any position or dimension based styles
 * where possible, unless specified already here.
 * The gallery automatically works out gallery item
 * positions etc.
 */

 



body.ps-active, body.ps-building, div.ps-active, div.ps-building
{
	background: #000;
	overflow: hidden;
    
    
    
    
    
/*    H I N Z U G E F Ü G T     2 0 2 3 - 1 1 - 1 4          
    
    
    
            X X X X X
            X X X X X
            X X X X X
    X X X X X X X X X X X X X
      X X X X X X X X X X X
        X X X X X X X X X
          X X X X X X X
            X X X X X
              X X X
                X
    
    */

    
    
    
    left: 50%;
    margin-left: -50%;

 
    
    
    
    
    
    
}
body.ps-active *, div.ps-active *
{ 
	-webkit-tap-highlight-color:  rgba(255, 255, 255, 0); 
	display: none;
}
body.ps-active *:focus, div.ps-active *:focus 
{ 
	outline: 0; 
}


/* Document overlay */

div.ps-document-overlay 
{
	background: #000;
}


/* UILayer */

div.ps-uilayer { 
	
	background: #000;
	cursor: pointer;
	
}


/* Zoom/pan/rotate layer */

div.ps-zoom-pan-rotate{
	background: #000;
}
div.ps-zoom-pan-rotate *  { display: block; }


/* Carousel */

div.ps-carousel-item-loading 
{ 
	background: url(loader.gif) no-repeat center center; 
}

div.ps-carousel-item-error 
{ 
	background: url(error.gif) no-repeat center center; 
}


/* Caption */

div.ps-caption
{ 
	background: #000000;
	background: -moz-linear-gradient(top, #303130 0%, #000101 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#303130), color-stop(100%,#000101));
	border-bottom: 1px solid #42403f;
	color: #ffffff;
	font-size: 13px;
	font-family: "Lucida Grande", Helvetica, Arial,Verdana, sans-serif;
	text-align: center;
}
div.ps-caption *  { display: inline; }

div.ps-caption-bottom
{ 
	border-top: 1px solid #42403f;
	border-bottom: none;
	min-height: 44px;
}

div.ps-caption-content
{
	padding: 13px;
	display: block;
}


/* Toolbar */

div.ps-toolbar
{ 
	background: #000000;
	background: -moz-linear-gradient(top, #303130 0%, #000101 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#303130), color-stop(100%,#000101));
	border-top: 1px solid #42403f;
	color: #ffffff;
	font-size: 13px;
	font-family: "Lucida Grande", Helvetica, Arial,Verdana, sans-serif;
	text-align: center;
	height: 44px;
	display: table;
	table-layout: fixed;
}
div.ps-toolbar * { 
	display: block;
}

div.ps-toolbar-top 
{
	border-bottom: 1px solid #42403f;
	border-top: none;
}

div.ps-toolbar-close, div.ps-toolbar-previous, div.ps-toolbar-next, div.ps-toolbar-play
{
	cursor: pointer;
	display: table-cell;
}

div.ps-toolbar div div.ps-toolbar-content
{
	width: 44px;
	height: 44px;
	margin: 0 auto 0;
	background-image: url(icons.png);
	background-repeat: no-repeat;
}

div.ps-toolbar-close div.ps-toolbar-content
{
	background-position: 0 0;
}

div.ps-toolbar-previous div.ps-toolbar-content
{
	background-position: -44px 0;
}

div.ps-toolbar-previous-disabled div.ps-toolbar-content
{
	background-position: -44px -44px;
}

div.ps-toolbar-next div.ps-toolbar-content
{
	background-position: -132px 0;
}

div.ps-toolbar-next-disabled div.ps-toolbar-content
{
	background-position: -132px -44px;
}

div.ps-toolbar-play div.ps-toolbar-content
{
	background-position: -88px 0;
}

/* Hi-res display */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (-moz-min-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 240dpi)
{
	div.ps-toolbar div div.ps-toolbar-content
	{
		-moz-background-size: 176px 88px;
		-o-background-size: 176px 88px;
		-webkit-background-size: 176px 88px;
		background-size: 176px 88px;
		background-image: url(icons@2x.png);
	}
}






@media (max-width: 900px) and (orientation: portrait) {


body {
	font-size: 16px;
	line-height: 24px;
}
}





/************ TEXT-STILE ************/

h1, .h1 {
	font-size: 1.5em;
	line-height: 1.2em;
	font-weight: 400;
	color: #FFF;
	letter-spacing: 2px;
	text-align: center;
	background-color: #91C530;
	margin: 0 0 5px 0;
	padding: 1.25rem 0 1.25rem 0;
	border-radius: 5px 5px 5px 5px;
}

h2, .h2 {
	font-size: 1.5em;
	line-height: 1.5em;
	font-weight: 300;
	color: #F00;
	letter-spacing: 1px;
	margin: 0 0 0 0;
	padding: 0;
	text-align: left;
	-moz-hyphens: none;
	-o-hyphens: none;
	-webkit-hyphens: none;
	-ms-hyphens: none;
	-hyphens: none;
}

h3, .h3 {
	font-weight: 200;
	color: #09F;
	-moz-hyphens: none;
	-o-hyphens: none;
	-webkit-hyphens: none;
	-ms-hyphens: none;
	-hyphens: none;
}

h3, .h3 {
	font-size: 1em;
	line-height: 1em;
	font-weight: 600;
}

h4, .h4 {
	font-size: 1.5em;
	line-height: 1.2em;
	font-weight: 400;
	color: #FFF;
	letter-spacing: 2px;
	text-align: center;
	background-color: #E3000F;
	margin: 0;
	padding: 1.25rem 0 1.25rem 0;
	border-radius: 5px 5px 5px 5px;
}

h5, .h5 {
	font-family: "Comic Sans MS", cursive;
	font-size: 2em;
	line-height: 1.2em;
	font-weight: 400;
	color: red;
	letter-spacing: 2px;
	text-align: center;
	margin: 0;
	padding: 1.25rem 0 1.25rem 0;
	border-radius: 5px 5px 5px 5px;
}

.left {
	text-align: left;
}

.right {
	text-align: right;
}

strong {
	font-weight: 600;
}


.nav {
	font-weight: 300;
	color: #06F;
}

ul {
	text-align: left;
	margin-top: -15px;
	padding-left: 20px;
}





/************ TABELLEN ************/


table, th, td  { 
	width: 100%; 
	background-color: #F3FBFD;
	border: none;
	border-bottom: 2px solid #FFF;
	padding: 10px;
	border-collapse: collapse; 
	text-align: left;
}

#spalte1 {
	width: 30%;
	vertical-align: text-center;
}

#spalte2 {
	width: 35%;
	vertical-align: text-center;
}

#spalte3 {
	width: 70%;
	vertical-align: text-center;
}






/************ FOOTER ************/


#footer-HG {
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 50px;
	left: 0;
	right: 0;
	background-color: #8a6646;
	z-index: 99;
}

#footer {
	position: relative;
	float: left;
	width: 1080px;
	height: 100px;
	left: 50%;
	margin-left: -540px; 
	margin-top: 15px;
	font-size: 0.8rem;
	color: #000;
	z-index: 98;
}

#footer a, #footer a.active, #footer a:hover {
	color: #FFF;
}

#name {
	position: relative;
	float: left;
	margin-top: 0;
	width: 30%;
}

#adresse {
	position: relative;
	float: left;
	margin-top: 0;
	width: 29%;
}

#tel {
	position: relative;
	float: left;
	margin-top: 0;
	width: 18%;
}

#mail {
	position: relative;
	float: right;
	margin-top: 0;
	width: 23%;
	text-align: right;
}

.button {
	position: relative;
	float: left;
	height: 25px;
	width: auto;
	margin-right: 10px;
}

.button-mail {
	position: relative;
	float: right;
	height: 25px;
	width: auto;
	margin-left: 10px;
}

#mobile-footer {
	display: none;
}







/************        C S S        ************/

/************      1 2 0 0 P X    ************/

/************ T A B L E T S & CO  ************/



@media (max-width: 1200px) 		{



body {
	font-size: 16px;
	line-height: 24px;
	width: 100%;
	left: 0;
	margin-left: 0;
}



/************ Head ************/


#logo-spatz {
	top: 1.7vw;
}

#logo-betreuung {
	top: 9.6vw;
}

#logo-visual {
	top: 1.7vw;
	left: 86%;
}

#nav {
	margin-top: 10vw;
	margin-left: 37.5vw;
	height: 5vw;
}



/************ content ************/


#content {
	width: 100%;
	margin-top: -2.5vw;
}

#box-slider {
	height: 45vw;
}

#index-text {
	height: 26vw;
	font-size: 2.5vw;
	line-height: 4vw;
}

#frosch {
    top: 33vw;
    margin-top: 20px;
    right: 10px;
}
    
#aktuelles {
	width: 560px;
	left: 50%;
	margin-left: -300px;
}

#big-pic-5 {
	position: relative;
	float: left;
	width: 100%;
	height: 45vw;
	margin: 0 4% 4% 0;
	z-index: 90;
}

#right-pic-5 {
	height: 27.5vw;
}

#team {
	min-height: 30vw;
}

.korrektur{
}

.korrektur2 {
}

#left-box {
}

#right-box {
}

#link-pic {
	width: 180px;
	margin: 5px 0 20px 20px;
	border: thin solid #666;
}

#QR-Code {
	width: 17.5vw;
	height: 17.5vw;
}

#footer {
	width: 90%;
	height: 100px;
	left: 0;
	margin-left: 5%; 
}



/************ GALLERY ************/

.gallery-swipe li img { 
	width: 28vw; 
	padding: 1vw;
}
    
    
}         




/************        C S S        ************/

/************       1 0 0 0 P X    ************/

/************ T A B L E T S & CO  ************/



@media (max-width: 1000px) 		{



#team {
	min-height: 33vw;
}

.button {
	display: none;
}

.button-mail {
	display: none;
}

#name {
	width: 29%;
}

#adresse {
	width: 29%;
}

#tel {
	width: 18.5%;
}

#mail {
	width: 21.5%;
}




    
    

/************        C S S        ************/

/************       8 5 0 P X    ************/

/************ T A B L E T S & CO  ************/



@media (max-width: 850px) 		{



#link-pic {
	width: 100%;
	margin: 5px 0 20px 0;
}

#content {
	top: -6vw;
}

#nav {
	width: 95%;
	height: 5vw;
	margin-top: 16vw;
	margin-left: 5%;
	color: #3CF;
}

#button {
	height: 1.6vw;
	padding-top: 2vw;
	background-color: #3CF;
}

#button a {
	color: #FFF;
}

#button a.active, #button a:hover {
	color: #FFF;
	font-weight: 600;
}

.Aktuell, .Wir, .Infos, .Fotos, .Haus, .Kontakt {
	width: 15.3%;
}

#left-index-box {
	margin-top: 50px;
}

#left-index-box, #big-box {
	margin-top: 50px;
}

.korrektur3 {
	top: -100px;
}

.korrektur4 {
	top: -100px;
}

#name {
	width: 30.5%;
}

#adresse {
	width: 28%;
}

#tel {
	width: 18%;
}

#mail {
	width: 23.5%;
}

.button {
	display: none;
}

.button-mail {
	display: none;
}


#team {
	position: relative;
	float: left;
	width: 28%;
	height: auto;
	min-height: 250px;
	margin: 0 4.8% 0 0;
}


#frosch {
    top: 33vw;
    margin-top: 50px;
    right: 10px;
}


}         



}         





/************        C S S        ************/

/************      7 0 0 P X    ************/

/************ S M A R T P H O N E S  ************/



@media (max-width: 700px)		{



body {
	font-size: 24px;
	line-height: 36px;
	position: absolute;
	width: 100%;
	left: 0;
	margin-left: 0;
}



/************ Head ************/


#logo-spatz {
	width: 55vw;
	top: 3vw;
	left: 8vw;
}

#logo-betreuung {
	width: 55%;
	top: 20vw;
	left: 9vw;
}

#logo-visual {
	width: 22%;
	top: 3vw;
	left: 72vw;
}

#nav {
	width: 100%;
	height: 20vw;
	margin-top: 32vw;
	margin-left: 0;
}

#button {
	height: 40px;
	padding-top: 1vw;
}

#button a {
	line-height: 1.5;
}

.Aktuell, .Wir, .Infos, .Fotos, .Haus, .Kontakt {
	width: 32.5vw;
	margin: 0 1.25vw 1.25vw 0;
}

.Haus, .Kontakt {
	margin-right: 0;
	width: 32.5%;
	border-radius: 5px 0 0 5px;
}

.Aktuell, .Fotos {
	border-radius: 0 5px 5px 0;
}

#sub-nav {
	width: 100%;
	height: auto;
	margin: 1.2vw 0 10vw 0;
}

#sub-nav-button {
	height: 50px;
	line-height: 1em;
}

.sub-nav-1, .sub-nav-3 {
	width: 49.4vw;
	margin: 0 1.2vw 0 0;
	border-radius: 0 5px 5px 0;
}

.sub-nav-2, .sub-nav-4 {
	width: 49.4vw;
	margin: 0 0 1.2vw 0;
	border-radius: 5px 0 0 5px;
}

.sub-nav-5 {
	width: 100vw;
	margin: 0 0 1.2vw 0;
	border-radius: 0;
}

.sub-nav-7, .sub-nav-8 {
	width: 49.4vw;
	margin: 0 1.2vw 0 0;
	border-radius: 0 5px 5px 0;
}

.sub-nav-6, .sub-nav-9 {
	width: 49.4vw;
	margin: 0 0 1.2vw 0;
	border-radius: 5px 0 0 5px;
}

#middlediv {
  height: 50px;
}





/************ content ************/


#content {
	width: 100%;
	top: -26vw;
	overflow: hidden;
}

#index-text {
	width: 80vw;
	height: auto;
	margin: 5% 0 0 5%;
	font-size: 2rem;
	line-height: 3rem;
}

#frosch {
    width: 50%;
    top: 60vw;
    margin-top: 30px;
    right: 10px;
}
    
#aktuelles {
	float: left;
	width: 80vw;
	margin: 5% 0 0 10%;
	left: 0;
	font-size: 1.8rem;
	line-height: 1.8rem;
}

#big-box {
	width: 100%;
	height: auto;
	margin: 26.5vw 0 0 0;
}

.korrektur {
	left: 0;
}

.korrektur2 {
}

.korrektur3 {
	left: 0;
	top: -30vw;
}

#left-box {
	width: 100%;
	height: auto;
	padding: 0;
}

#right-box {
	width: 100%;
	height: auto;
	margin-top: -10px;
	padding: 100px 0 50px 0;
	margin-bottom: 50px;
}

#wide-text {
	width: 80%;
	margin: 0 10% 0 10%;
}

#text {
	width: 80%;
	margin: 0 10% 0 10%;
}

#left-text, #right-text {
	width: 100%;
	margin: 0;
}

#right-text img {
	width: 200px;
	height: auto;
	margin: 0 0 10px 20px;
}

#left-pic, #right-pic, #left-pic-double, #right-pic-double, #wide-pic {
	width: 125%;
	height: auto;
	margin: 20px -12.5% 20px -12.5%;
}

#big-pic-5 {
	width: 125%;
	height: 55vw;
	margin: 0 -12.5% 0 -12.5%;
	z-index: 90;
}

#right-pic-5 {
	width: 125%;
	height: 63vw;
	margin: 0 -12.5% 5% -12.5%;
}

#blog {
	width: 80%;
	padding: 0;
	margin: 5% 0 0 10%;
}

#blog-line {
	width: 125%;
	margin-left: -12.5%;
	margin-right: -12.5%;
}

#box-slider {
	margin: 4% 0 0 0;
	width: 100vw;
	height: 49vw;
	border-radius: 0;

}

#maps-pic {
	height: 40vw;
}

#QR-Code {
	display: none;
}

#CD {
	width: 60%;
	margin: 0 0 20vw 20%;
}

h1, .h1 {
	margin-top: 0;
	padding: 3vw;
	width: 125%;
	margin-left: -12.5%;
	margin-right: -12.5%;
	border-radius: 0;
}

h2, .h2 {
	text-align: center;
}

#team-links, #team-rechts {
	position: relative;
	float: left;
	width: 100%;
	height: auto;
	min-height: 430px;
	margin: 10px 9.8% 60px 0;
}


    
    
/************ GALLERY ************/

#galleries {
	width: 100%;
	-webkit-overflow-scrolling: touch;
    padding-bottom: 0vw;
}
    
.gallery-swipe li img { 
	width: 38vw; 
	padding: 1vw;
}


    
    
/************ TABELLEN ************/


table, th, td  { 
	font-size: 0.9em;
}





/************ FOOTER ************/



#footer-HG {
	display: none;
}

#footer {
	display: none;
}

#mobile-footer {
	display: block;
	position: relative;
	float: left;
	float: left;
	width: 100%;
	left: 0;
	right: 0;
	margin-top: -50vw;
	background-color: #FFF;
	z-index: 100;
}

#mobile-mail {
	position: relative;
	float: left;
	width: 48%;
	height: 24vw;
	margin: 0;
}

#mobile-tel {
	position: relative;
	float: right;
	width: 48%;
	height: 24vw;
	margin: 0;
}

#trenner {
	position: relative;
	float: right;
	width: 100%;
	height: 4vw;
	margin: 0;
}

#mobile-maps {
	position: relative;
	float: left;
	width: 48%;
	height: 24vw;
	margin: 0;
}

#mobile-info {
	position: relative;
	float: right;
	width: 48%;
	height: 24vw;
	margin: 0;
}

#mobile-change {
	position: relative;
	float: left;
	margin: 3vw 0 0 0;
	width: 100%;
	height: 10vw;
	font-size: 3.8vw;
	line-height: 9vw;
	text-align: center;
	color: #FFF;
	background-color: #666;
}






      
}