/* alex-brush-regular - latin */
@font-face {
  font-family: 'Alex Brush';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('../fonts/alex-brush-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/alex-brush-v20-latin-regular.woff') format('woff'); /* Modern Browsers */
}

/* tangerine-regular - latin */
@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('../fonts/tangerine-v17-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/tangerine-v17-latin-regular.woff') format('woff'); /* Modern Browsers */
}

/* tangerine-700 - latin */
@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('../fonts/tangerine-v17-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/tangerine-v17-latin-700.woff') format('woff'); /* Modern Browsers */
}


/* qwigley-regular - latin */
@font-face {
  font-family: 'Qwigley';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('../fonts/qwigley-v16-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/qwigley-v16-latin-regular.woff') format('woff'); /* Modern Browsers */
}


/*------------ grundsätzliche Parameter -----------------*/
html     {
         overflow-y:scroll;
         }

body   {
        font-family:Verdana,Helvetica,Arial,sansserif;
        color:black;
        position:absolute;
        margin:0 auto;
        width:100%;
        background-color:#fffbff;
        text-align:center;
        font-size:100.01%;
        }

h1       {
          font-size:140%;
          }

h2       {
          font-size:105%;
          }

h3       {
          font-size:100%;
          }

h1,h2,h3,h4 {
          margin:0 0 5px 0;
          color:#C30456;
          }

h1,h3,h4 {
          text-indent:-9999px;
          }

h6       {
         font-family:'Qwigley', cursive;
         font-size:170%;
         font-weight:bold;
         color:#C30456;
         letter-spacing:0.1em;
         margin:30px 0 0 0;
         text-align:left;
         }

em       {
         margin-left:0;
         font-family:Verdana,Helvetica,Arial,sansserif;
         font-size:0.6em;
         }

a:link, a:visited        {
              color:#C30456;
              text-decoration:none;
              font-weight:bold;
              }

a:hover,a:focus,a:active        {
                                 color:#C30456;
                                 text-decoration:underline;
                                 font-weight:bold;
                                 }

table    {
         margin:50px auto;
         width:100%;
         border-spacing:0;
         }

caption  {
         caption-side:bottom;
         font-style:italic;
         padding-top:3px;
         }

th       {
         background-color:#fffbff;
         color:#C30456;
         border:1px solid #fff4ff;
         border-radius:10px;
         }

td       {
         border:1px solid #ffffff;
         padding:10px;
         vertical-align:top;
         border-radius:10px;
         }

/*-------------Formular --------------------------*/

#content_form  {
          padding-bottom:200px;
          text-align:left;
          font-size:0.9em;
          margin-left:190px;
          margin-right:220px;
          margin-bottom:15px;
          overflow:hidden;
          }


input    {
         color: #000000;
         border: 0.1em solid #C30456;
         background-color: #ffffff;
         height: 2em;
         width: 15%;
         padding: 0;
         }

input.datum      {
                 width:5% !important;
                 }

input.nok        {
                 visibility:hidden;
                 }

textarea    {
         color: #000000;
         border: 0.1em solid #C30456;
         background-color: #ffffff;
         height: 10em;
         width: 60%;
         padding: 0;
         margin-bottom:1em;
         }

label    {
         color:#000000;
         font-weight:normal;
         width:80%;
         display:block;
         float:left;
         }

label::after {
         content: ": ";
         }

input:required + label::before {
                                 content: "*";
                                 color: red;
                                 }

input:required:valid + label::before  {
                                         content: "*";
                                         color: green;
                                         }

textarea:required + label::before {
                                 content: "*";
                                 color: red;
                                 }

textarea:required:valid + label::before {
                                         content: "*";
                                         color: green;
                                         }

input[type='radio']      {
                         width:1em;
                         height:1em;
                         float:left;
                         margin-bottom:1em;
                         }

input[type='radio'] + label      {
                                 height:1.5em;
                                 margin-left:1em;
                                 width:20%;
                                 margin-bottom:1em;
                         }

input[type='radio'] + label::after {
                                         content: "";
                                         }

button   {
         margin-top:1.5em;
         }

/*------------ blending --------------------------*/
#blendme {
         position:relative;
         text-align:center;
         margin:30px auto 0;
         width:200px;
         height:157px;
           }

#blendme > img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    opacity: 0;
    z-index: 0;
    -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 28s linear infinite 0s;
    -moz-animation: imageAnimation 28s linear infinite 0s;
    -o-animation: imageAnimation 28s linear infinite 0s;
    -ms-animation: imageAnimation 28s linear infinite 0s;
    animation: imageAnimation 28s linear infinite 0s;
}

#blendme > img:nth-child(2)  {
    background-image: url(http://www.deichbilder.de/maedelz/tierisches/images/katze12.jpg);                  /*delay berechnen: animation Zeit (20s)/Bildanzahl=1. delay*/
    -webkit-animation-delay: 4s;
    -moz-animation-delay: 4s;
    -o-animation-delay: 4s;
    -ms-animation-delay: 4s;
    animation-delay: 4s;
}
#blendme > img:nth-child(3) {
    background-image: url(http://www.deichbilder.de/maedelz/tierisches/images/katze6.jpg);                    /*1. delay * 2=2. delay*/
    -webkit-animation-delay: 8s;
    -moz-animation-delay: 8s;
    -o-animation-delay: 8s;
    -ms-animation-delay: 8s;
    animation-delay: 8s;
}
#blendme > img:nth-child(4) {
    background-image: url(http://www.deichbilder.de/maedelz/tierisches/images/hund5.jpg);                     /*1. delay * 3=3. delay*/
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s;
}
#blendme > img:nth-child(5) {
    background-image: url(http://www.deichbilder.de/maedelz/tierisches/images/katze2.jpg);                     /*1. delay * 4=4. delay*/
    -webkit-animation-delay: 16s;
    -moz-animation-delay: 16s;
    -o-animation-delay: 16s;
    -ms-animation-delay: 16s;
    animation-delay: 16s;
}
#blendme > img:nth-child(6) {
    background-image: url(http://www.deichbilder.de/maedelz/tierisches/images/hund3.jpg);                     /*1. delay * 5=5. delay*/
    -webkit-animation-delay: 20s;
    -moz-animation-delay: 20s;
    -o-animation-delay: 20s;
    -ms-animation-delay: 20s;
    animation-delay: 20s;
}
#blendme > img:nth-child(7) {
    background-image: url(http://www.deichbilder.de/maedelz/tierisches/images/hund1.jpg);                     /*1. delay * 6=6. delay*/
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s;
}

@-webkit-keyframes imageAnimation {
    0% { opacity: 0;
    -webkit-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@-moz-keyframes imageAnimation {
    0% { opacity: 0;
    -moz-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -moz-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@-o-keyframes imageAnimation {
    0% { opacity: 0;
    -o-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -o-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@-ms-keyframes imageAnimation {
    0% { opacity: 0;
    -ms-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -ms-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@keyframes imageAnimation {
    0% { opacity: 0;
    animation-timing-function: ease-in; }
    8% { opacity: 1;
         animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

/*-------------------- Wrapper -------------------------*/
#wrapper    {
          font-family:Verdana,Helvetica,Arial,sansserif;
          width:1001px;
          background-color:#fffbff;
          position:relative;
          margin:0 auto;
          text-align:center;
          }

/*--------------------Farbwahl Startseite -----------------*/
#wahl    {
          position:absolute;
          top:0;
          left:0;
          z-index:1;
     }

#wahl form       {
                 display:inline;
          }

#wahl input.rosa {
                 width:20px;
                 background-color:#C30456;
                 color:#C30456;}

#wahl input.braun {
                 width:20px;
                 background-color:#5f0000;
                 color:#5f0000;
               }

#wahl em {
         color:#C30456;
         }

/*--------------------leerer Container zum Clearen ------------------*/
.clear   {
          clear:both;
         }
/*-------------------Kopfbereich --------------------------------*/
#kopf  {
                   width:600px;
                   position:relative;
                   text-align:center;
                   background-color:#fffbff;
                   margin-top:20px;
                   margin-left:auto;
                   margin-right:auto;
                   height:200px;
                   border-radius:15px 15px 0 0;
                 }

#kopf h5 {
         font-family:'Qwigley', cursive;
         font-size:250%;
         font-weight:bold;
         color:#C30456;
         letter-spacing:0.1em;
         float:left;
         margin-left:50px;
         margin-top:0;
         }

#kopf h5:first-letter    {
                         font-family:'Alex Brush', cursive;
                         color:#C30456;
                         }

#kopf h6 {
         font-family:'Qwigley', cursive;
         font-size:170%;
         font-weight:normal;
         color:#C30456;
         letter-spacing:0.1em;
         margin-top:18px;
         margin-left:0; }
/*---------------------------Fußbereich -------------------------*/
#fuss  {
                   width:100%;
                   position:relative;
                   top:-190px;
                   background-color:#fffbff;
                   margin-bottom:50px;
                   margin-left:auto;
                   margin-right:auto;
                   height:100px;
                   text-align:center;
                   border-radius:0 0 15px 15px;
                 }

#fuss_content a,#fuss_content em   {
                  font-family:Verdana,Helvetica,Arial,sansserif;
                  font-size:0.6em;
                  position:relative;
                  width:600px;
                  text-align:center;
                  padding:30px;
                  color:#C30456;
                  clear:both;
                  }
/*-------------------------Navigation -------------------------*/
#mobilenav       {
                 display:none;
                 }

#navicon {
         display:none;
         }

#nav    {
          font-family:Verdana,Helvetica,Arial,sansserif;
          font-size:0.8em;
          position:relative;
          top:-130px;
          margin:0 auto;
          overflow:hidden;
          z-index:3;}

#nav ul  {
         display:inline;
         float:left;
         padding:0;
         margin-left:110px;
         }

#nav ul li  {
         list-style:none;
         float:left;
         padding:0;
         width:135px;
         text-align:left;
         border:0;
         margin:0 auto;
         padding-top:2px;
         }

#nav ul li ul    {
                 margin-left:0;
                 }

#nav li ul li    {
                 position:relative;
                 text-align:left;
                 margin:0;
                 padding:0;
                 line-height:1.5;
                 border-top:solid 1px #fff4ff;
                 visibility:hidden;
                 }

#nav a:link,#nav a:visited,#nav a:hover,#nav a:focus,#nav a:active        {
                                                   padding-left:4px;
                                                   text-decoration:none;
                                                   display:block;
                                                 }

#nav li:hover ul li    {
                         visibility:visible;
                         }


#nav ul li:hover {
                 background-color:#fffbff;
                 border-radius:5px;}

#nav a:hover,#nav a:focus,#nav a:active    {
                                 background-color:#fff4ff;
                                 border-radius:5px;
                                 color:#696969;}

/*-------------------------DropDown-Menü Navigation Alternative --------------------*/
#subnav  {
         position:relative;
         top:-110px;
         text-align:center;
         clear:left;
         z-index:2;}

#subnav  select  {
                 color:#C30456;
                 font-weight:bold;
                 font-size:0.7em;
                 background-color:#fffbff;
                 width:250px;
                 border:0;
                 padding:2px;
                 }

#subnav option.odd      {
                 background-color:#fff;
                 }
/*-----------------------Seitentitel ------------------------------*/
#titel_main   {
          position:relative;
          margin-top:-100px;
          text-align:center;
          }

#titel_main h2   {
         font-family:'Qwigley', cursive;
         font-size:220%;
         color:#C30456;
         letter-spacing:0.1em;
         }

#titel   {
          text-align:center;
          }

#titel h2   {
         font-family:'Tangerine', cursive;
         font-size:240%;
         color:#C30456;
         letter-spacing:0.1em;
         padding-top:20px;
          }

#titel h6        {
                 text-align:center;
                 }

/*---------------------Bildwechsel auf Startseite --------------------*/
#teaser  {
         position:relative;
         width:150px;
         text-align:right;
         margin-left:810px;
         }

#teaser img      {
                 margin-top:30px;
                 background-color:#fffbff;
                 padding:3px;
                 box-shadow: 2px 2px 6px rgba(0,0,0,0.6);
                 }

/*------------------------Content-Bereich -------------------------*/
/*------------------Rahmen um Inhalt-------------*/
#main    {
          background:url(http://www.deichbilder.de/images/main_footer.png) no-repeat;
          background-position:bottom;
          font-family:Verdana,Helvetica,Arial,sansserif;
          width:1000px;
          background-color:#fff4ff;
          position:relative;
          text-align:center;
          top:-175px;
          clear:both;
          border-radius:15px;
          }
/*-----------------Inhalt Startseite-----------------*/
#content_main  {
          position:relative;
          padding-bottom:200px;
          text-align:center;
          margin-left:150px;
          margin-right:150px;
          margin-bottom:15px;
          font-size:0.9em;
          }

#content_main p  {
                  text-align:left;
                  }

#content_main p:first-letter  {
                         font-family:'Tangerine', cursive;
                         font-size:3em;
                         letter-spacing:0.1em;
                         font-weight:bold;
                         color:#C30456;
                         line-height:.9;
                         }

#content_main iframe   {
         border-color:#c30456;
         border-style:outset;
         border-width:5px;
         border-radius:15px;
         }

/*-----------------Inhalt sonst-----------------*/
#content {
          padding-bottom:200px;
          text-align:center;
          font-size:0.9em;
          margin-left:150px;
          margin-right:150px;
          margin-bottom:15px;
          overflow:hidden;
          }

#content p       {
                  text-align:left;
                  }

#content h4+p:first-letter  {
                         font-family:'Tangerine', cursive;
                         font-size:3em;
                         letter-spacing:0.2em;
                         font-weight:bold;
                         color:#C30456;
                         float:left;
                         line-height:.9;
                         }

#content img       {
                      padding:2px;
                      margin:15px;
                      background-color:#fffbff;
                      border:1px solid #ffffff;
                      box-shadow: 2px 2px 6px rgba(0,0,0,0.6);
                      float:left;
                      }

#content img.transp       {
                  background-color:#fff4ff;
                  border:0;
                  padding:0;
                  box-shadow:none;
                  }

#content img.rechts       {
                  float:right;
                  clear:left;
                  }

#content img.titel       {
                  background-color:#fff4ff;
                  margin:0;
                  border:0;
                  padding:0;
                  box-shadow:none;
                  float:none;
                  clear:both;
                 }

#content img.tabelle       {
                  float:none;
                  clear:both;
                  padding:0;
                  }

#content a img       {
                      padding:5px;
                      margin:0 20px 20px 20px;
                      background-color:#fffbff;
                      border:1px solid #ffffff;
                      box-shadow: 2px 2px 6px rgba(0,0,0,0.6);
                      float:left;
                      }

#content p em  {
              font-size:0.8em;
              text-align:left;
              color:black;
              padding:0;
              }

#content p.auswahl {
                 margin-left:160px;
                 }

#content h2 {
            color:#C30456;
            text-align:left;
            }

#content ul       {
         list-style-position:outside;
         list-style-type:circle;
         }

#content li  {
     text-align:left;
     margin-left:20px;
     margin-right:20px;
     margin-bottom:7px;
     line-height:1.5;
     }

#content td li  {
                 text-align:left;
                 margin:0;
                 line-height:1.5;
                 }

#content td ul  {
                 margin:0;
                 }

#content table.tabelle    {
                         border-spacing:10px;
                         }



/*-------------------------Content-Bereich Tierisches ----------------------*/
#besuch {
          padding-bottom:200px;
          text-align:center;
          font-size:0.9em;
          margin-bottom:15px;
          margin-left:65px;
          overflow:hidden;
          }

#besuch p       {
                  text-align:left;
                  width:400px;
                  float:left;
                  margin-top:10px;
                  margin-left:10px;}

#besuch img      {
                      padding:5px;
                      margin:0 20px 20px 20px;
                      background-color:#fffbff;
                      border:1px solid #ffffff;
                      box-shadow: 2px 2px 6px rgba(0,0,0,0.6);
                      float:left;
                      }

#besuch img.transp       {
                  background-color:#fff4ff#fff4ff;
                  border:0;
                  padding:0;
                  box-shadow:none;
                  }

#besuch .rechts       {
                  float:right;
                  clear:left;
                  }

#besuch em  {
              font-size:0.8em;
              text-align:left;
              color:black;
              display:inline;
              clear:both;}


/*-------------------------mobiles Design -----------------------*/


@media only screen and (max-width: 40em)
{

#wrapper {
         width:auto;
         }

#kopf  {
        width:100%;
        font-size:larger;
        height:auto;
        margin-top:0;
       }

#kopf h6 {
         display:inline-block;
         margin-bottom:0;
         margin-top:0;
         }

#kopf h5 {
          margin-bottom:0;
       }

#nav     {
         display:none;
         }

#navicon        {
                 display:block;
                 float:left;
                 }

#mobilenav       {
         display:none;
                 }

#mobilenav ul    {
                 padding-left:5px;
                 }

#mobilenav li {
                 list-style:none;
                 }

#navicon:hover #mobilenav,#navicon:active #mobilenav,#navicon:focus #mobilenav       {
                 display:block;
                 position:absolute;
                 width:max-content;
                 border:0.04em solid #cccccc;
                 border-radius:1em;
                 text-align:left;
                 z-index:1;
                 background-color:white;
                  }

#content  {
           font-size:x-large;
           margin-left:10px;
           margin-right:10px;
           padding-bottom:50px;
         }

#content_main  {
           font-size:x-large;
           margin-left:10px;
           margin-right:10px;
         }

#fuss    {
         top:0;
         }

#fuss_content a,#fuss_content em   {
         font-size:larger;
         width:100%;
         padding:0;
         display:block;
         }

#content p.auswahl {
         display:none;
         }

#main {
         top:unset;
         background:none;
         position:unset;
         width:auto;
         }

#teaser  {
         display:none;
         }

#titel   {
          font-size:large;
          text-align:left;
          }

#titel_main   {
          text-align:left;
          margin-top:unset;
          }

#titel h6   {
          text-align:left;
          }
#besuch {
          padding-bottom:50px;
          text-align:left;
          font-size:0.9em;
          margin-bottom:15px;
          margin-left:10px;
          margin-right:10px;
          overflow:hidden;
          }

#besuch p       {
                  width:95%;
                  }

#content_form    {
                 padding-bottom:50px;
                 text-align:left;
                 font-size:0.9em;
                 margin-left:5px;
                 margin-right:5px;
                 margin-bottom:15px;
                 overflow:hidden;
                 }
}



@media print {

                 #nav ul li ul {
                         display:none;
                      }
                  }