/* -------- NAVIGATION ----------*/

#mainnav > input, #mainnav > label {
display: none; /* Label und Checkbox ausblenden*/
}
#mainnav > label {
width: 100%;
}

/* ---------- MOBILE -----------*/

@media (max-width: 640px) {

#mainnav > label, #mainnav ul li ul {
display: block;
}
#mainnav > ul {
height: 0;
opacity: 0;
clear: both;
-webkit-transition:all .5s ease;
-moz-transition:all .5s ease;
transition:all .5s ease;
background: #FBEABC;
}
#mainnav > input:checked + ul {
opacity: 1;
height: auto;
}

#mainnav ul li
{
    line-height:2.6em;
    border-bottom: 1px solid #FFD96F;
    text-align: center;
}

body {
   background: url(img/background-mobile.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.logo {
    width: 50%;
    margin: 0 25% 30px 25%;
}

.intro {
    padding: 30px 10px 0 30px;
}

.intro h1 {
    font-size: 2em;
}

.intronav {
    text-align: center;
}

.labelnav {
    display: block;
    width: 100%;
    line-height: 2.5em;
    font-size: 1.4em;
    background: #FFD96F;
    text-align: center;
}

.logolink {
    width: 35%;
    margin: auto;
}

.content {
    margin: 30px;
}

.galerie img {
  max-width: 100%;
}

.horsty {width:60%; transform: rotate(-10deg); display: block; margin: 30px auto;}

}

.horstylink {display: block; text-align: center;}

/*----------- TABLET; SMALL----------*/

@media (min-width: 641px)
{
  #mainnav {z-index: 10000}
  #mainnav > label, #mainnav ul li ul {
  display: block;
  }
  #mainnav > ul {
  height: 0;
  opacity: 0;
  clear: both;
  -webkit-transition:all .5s ease;
  -moz-transition:all .5s ease;
  transition:all .5s ease;
  background: #FBEABC;
  z-index: 1000
  }
  #mainnav > input:checked + ul {
  opacity: 1;
  height: auto;
  }

  #mainnav ul li
  {
      line-height:2.6em;
      border-bottom: 1px solid #FFD96F;
      text-align: center;
  }

  .intronav {
      text-align: center;
  }

  .labelnav {
      display: block;
      width: 100%;
      line-height: 2.5em;
      font-size: 1.4em;
      background: #FFD96F;
      text-align: center;
  }


body{
background: url(img/bgs/background.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.equigymnastik {
    background: url(img/bgs/bg-equigymnastik.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

 .therapie{
background: url(img/bgs/bg-therapie.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.kundenstimmen{
background: url(img/bgs/bg-kundenstimmen.jpg) no-repeat center center fixed;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}

.galerie{
background: url(img/bgs/bg-galerie.jpg) no-repeat center center fixed;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}

.kontakt{
background: url(img/bgs/bg-kontakt.jpg) no-repeat center center fixed;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}

.vierpfoten{
background: url(img/bgs/bg-4pfoten.jpg) no-repeat center center fixed;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}



.logo {
 margin: auto;
 margin-top: 50px
}

.intro {
    width: 260px;
    height: 100%;
    margin-right: 0;
    float: right;
    background: #ffd96f;
    text-align: center;
}


.introcontent {
    margin: 20% 15% 0 15%;
    text-align: left;
}


.logolink {
    position: absolute;
    right: 5%;
    top: 100px;
    width: 180px;
    height: 180px;
    background: #FBEABC;
    border-radius:120px;
    padding: 20px;
    transform: rotate(7deg);
    -webkit-box-shadow: 3px 4px 5px -3px rgba(0,0,0,0.75);
-moz-box-shadow: 3px 4px 5px -3px rgba(0,0,0,0.75);
box-shadow: 3px 4px 5px -3px rgba(0,0,0,0.75);
z-index: 500
    }

.logolink img {
    width: 120px;
    margin:20px auto;
    display: block;
    z-index: 500
}

.horstylink {
    position: absolute;
    right: 10%;
    bottom: 100px;
    width: 180px;
    height: 180px;
    border-radius:120px;
    padding: 20px;
    transform: rotate(7deg);
    }

.horstylink img {
    display: block;
    z-index: 500;
    width:200;
}

.horsty {width:180px; transform: rotate(-10deg); margin-left:-150px; margin-top:-150px; display: block;}




.content {
    background: url('img/bg.png');
    width: 60%;
    margin: 15px;
    padding: 10px;
}

.galerie img {max-width: 100%;}

}

/*----------- TABLET; BIGGER -----------*/

@media (min-width:860px)
{

  .intro {
    margin-right: 10%;
}

.content {
    width: 45%;
    margin: 15px;
    padding: 10px;
}
.logolink {
    position: absolute;
    right: 5%;
    top: 50px;
    width: 220px;
    height: 220px;
    background: #FBEABC;
    border-radius:120px;
    padding: 20px;
    transform: rotate(7deg);
    -webkit-box-shadow: 3px 4px 5px -3px rgba(0,0,0,0.75);
-moz-box-shadow: 3px 4px 5px -3px rgba(0,0,0,0.75);
box-shadow: 3px 4px 5px -3px rgba(0,0,0,0.75);
    }

.logolink img {
    width: 160px;
    margin:20px auto;
    display: block;
}



}

/*----------- DESKTOP; SMALL -----------*/

@media (min-width:1024px)
{
  #mainnav > label {display: none;}
#mainnav > ul {opacity: 1;}

#mainnav {height: 70px;
background:#FFD96F }

#mainnav ul li {
  border:0;
  float: left;
  line-height: 70px;}

  #mainnav ul li a {
    line-height: 70px;
    display: block;
    padding: 0 15px;
  }

  #mainnav ul li a:hover {
    background: #FBEABC;
  }




.content {
    width: 40%;
    margin: 30px;
    padding: 10px;
}

/*--Galerie--*/
.galeriediv img {display:block; box-shadow: 3px 4px 5px -3px rgba(0,0,0,0.75);}
.bild0{width:100%; transform: rotate(2deg);}
.bild1{width:50%; transform: rotate(-5deg);}
.bild2{width:50%; margin-left: 50%; margin-top:-200px; transform: rotate(5deg);}

.bild3{width:40%;margin-left:-30px; margin-top: 100px; transform: rotate(-5deg);}
.bild4{width:40%;margin-left:-50px; margin-left: 30%; margin-top:-130px;}
.bild8{width:40%;margin-left:300px; transform: rotate(5deg); margin-top:-250px;}

.bild5{width:40%;margin-left: -50px; margin-top:50px; transform: rotate(-5deg);}
.bild6{width:40%;margin-left: 100px;  transform: rotate(-2deg);}
.bild7{width:40%;margin-left: 300px; margin-top:-30px; transform: rotate(5deg);}


.bilda1{width:60%;margin-left: -20px; margin-top:50px; transform: rotate(-5deg);}
.bilda2{width:60%;margin-left: 200px; margin-top:-30px; transform: rotate(5deg);}
.bilda3{width:60%;margin-left: 0px; margin-top:-30px; transform: rotate(-5deg);}

.bilda4{width:60%;margin-left: -10px; margin-top:50px; transform: rotate(-5deg);}
.bilda5{width:60%;margin-left: 200px; margin-top:-100px; transform: rotate(5deg);}

.bilda6{width:40%;margin-left: -30px; margin-top:50px; transform: rotate(-5deg);}
.bilda7{width:40%;margin-left: 150px; margin-top:-150px;}
.bilda8{width:40%;margin-left: 300px; margin-top:-200px; margin-bottom: 70px;transform: rotate(5deg);}

.bilda9{width:50%;margin-left: 0px; margin-top:-0px; margin-bottom: 70px;transform: rotate(-5deg);}
.bilda10{width:50%;margin-left: 200px; margin-top:-200px; margin-bottom: 70px;transform: rotate(5deg);}


}

/*----------- DESKTOP; BIGGER -----------*/

@media (min-width:1200px)
{

.intro {
    margin-right: 25%;
    width: 300px;
}

.content {
    width: 30%;
    margin: 50px;
    padding: 10px;
}

.logolink {
    right: 10%;
}

}