@charset "UTF-8";

/* arapey-regular - latin */
@font-face {
  font-family: 'Arapey';
  font-style: normal;
  font-weight: 400;
  src: local('Arapey Regular'), local('Arapey-Regular'),
                url('./fonts/arapey-v8-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
                url('./fonts/arapey-v8-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}


html {
        width:100%;
        height:100%;
}


body {
        margin:0;
        padding:0;
        background-image:url(PIC/schiefer.jpg);
}

h1 {
        font-family: 'Arapey','Times New Roman', Times, serif;
        font-size:24px;
        line-height: 35px;
        color:#806345;
        font-weight:lighter;
        text-transform: none;
        text-align:left:
        letter-spacing: 0.05em;
        display:inline;
}


h2 {
        font-family: 'Arapey', 'Times New Roman', Times, serif;
        font-size:20px;
        font-weight:normal;
        color:#a02818;

        letter-spacing: 0.05em;

}


h3 {
        font-family: Arial, Helvetica, sans-serif;
        font-size:11px;
        font-weight:bold;
        color:#1a3059;
        letter-spacing: 0.25em;
        text-transform:uppercase;

}

h4 {
        font-family: Arial, Helvetica, sans-serif;
        font-size:13px;
        font-weight:normal;
        color:#1a3059;



}

a:link {
        font-family: 'Arapey','Times New Roman', Times, serif;
        font-size:13px;
        color: #1a3059;
        text-decoration: none;
        font-weight: bold;

        letter-spacing: 0.15em;
}


a:hover {
        font-family: 'Arapey','Times New Roman', Times, serif;
        font-size:13px;
        color: #1a3059;
        text-decoration: none;
        font-weight: bold;

        text-decoration:underline;
        letter-spacing: 0.15em;

}

a:visited {
        font-family: 'Arapey','Times New Roman', Times, serif;
        font-size:13px;
        color: #1a3059;
        text-decoration: none;
        font-weight: bold;
        letter-spacing: 0.15em;
}


a.image:link {
        border:none;
        border:0px;
}


a.image:hover {
        border:none;
                border:0px;
}

a.image:visited {
        border:none;
                border:0px;
}

hr {
        border: none;
        border-bottom: 1px solid #d7cbae;
}

.zitat{
        font-family: 'Arapey','Times New Roman', Times, serif;
        text-align: center;
        font-size:15px;
        color:#243775;
}


  .spruch {
          margin: 0 0 0 50px;
          width:300px;
          height:333px;
          float:left;
          font-family: 'Arapey','Times New Roman', Times, serif;
          /*font-size:23px;
          line-height: 35px; */
          font-size:18px;
          line-height: 30px;
          color:#806345;
          font-weight:lighter;
          text-transform: none;
          text-align:left:
          letter-spacing: 0.05em;
          display:inline;
  }

  .spruch_klein {
          /* margin: 0 0 0 50px;
          width: 300px;                           bis 16.9.2022 */
          margin: 0 0 0 10px;
          width: 340px;
          height:333px;
          float:left;
          font-family: 'Arapey','Times New Roman', Times, serif;
          /*font-size:23px;
          line-height: 35px; */
          /* font-size:14px;
          line-height: 20px;             bis 16.9.2022 */
          font-size: 13px;                 /* verkleinert wg Handy-Platz */
          line-height: 19px;                  /* verkleinert wg Handy-Platz */
          color:#806345;
          font-weight:lighter;
          text-transform: none;
          text-align:left:
          letter-spacing: 0.05em;
          display:inline;
  }

.spruch_klein_links {
          margin: 0 0 0 50px;
          /* width:400px;                    bis 16.9.2022 */
          width:380px;
          /* height:333px;                  so war es bei spruch_klein */
          float:left;
          font-family: 'Arapey','Times New Roman', Times, serif;
          /* font-size:14px;
          line-height: 20px;             bis 16.9.2022 */
          font-size: 13px;                 /* angepasst an spruch klein */
          line-height: 19px;                  /* angepasst an spruch klein */
          color:#806345;
          font-weight:lighter;
          text-transform: none;
          text-align:left:
          letter-spacing: 0.05em;
          display:inline;
  }


.startspruch {
        margin: 0 0 0 50px;
        /* width:500px;                         bis 16.9.2022 */
        width: 660px;
        height:333px;
        float:left;
        font-family: 'Arapey','Times New Roman', Times, serif;
        /*font-size:23px;
        line-height: 35px; */
        font-size:30px;
        line-height: 40px;
        color:#806345;
        font-weight:lighter;
        text-transform: none;
        text-align:center:
        letter-spacing: 0.05em;
        display:inline;
}

.autor{
        font-family: Arial, Helvetica, sans-serif;
        text-transform:uppercase;
        text-align: right;
        color:#1a3059;
        font-size:13px;
        letter-spacing: 0.15em;
}

.autor_klein{
        font-family: Arial, Helvetica, sans-serif;
        text-transform:uppercase;
        text-align: right;
        color:#1a3059;
  font-weight: normal;
        font-size:8px;
  line-height: 14px;
        letter-spacing: 0.15em;
}

.kontaktdaten{
        font-family: Arial, Helvetica, sans-serif;
        text-transform:uppercase;
        text-align: left;
        color:#806345;
        font-size:12px;
        letter-spacing: 0.10em;

}

/* 11.10.2022 Schriftgroesse zur Zeit fuer den Link auf der Startseite */
.groessere_schrift{
        font-size:16px !important;
}


#hintergrundbild {}

.background_layer {
        width:100%;
        background-repeat: no-repeat;
        position:fixed;
        opacity: 1.5;
        z-index:1;

}


#preback{
        text-align: center;

}

#logo {

        margin:-3px auto 0 auto;
        width:704px;
        height:220px;
        background-image:<!---url(PIC/logo.png); testlöschung 04.10.2022 -->
        z-index:100;

}



/*MENUE*/
#menuewrapper {
        margin:20px auto 0 auto;
        width:920px;
        height:300px;
        position:relative;
        z-index:200;
}


ul#karten{
        margin: -250px 0 0 0;
        min-width:920px;
        display: block;
        list-style-type: none;

}
ul#karten li{
        float: left;
}
ul#karten li a{
        display: block;
}
ul#karten li a span{
        display: none;
}


ul#karten li#karte a{
                float: left;
                width:364px;
                height:248px;
                background-image:url(NAVI/karte_bruecke.png);
                margin: -15px 0 0 -5px;
                -webkit-transition:-webkit-transform 0.51s,margin 0.51s;
                -o-transition-property:width,height,-o-transform, margin;
                -o-transition-duration:0.51s,0.51s;
                -moz-transition-property:-o-transform, margin;
                -moz-transition-duration:0.51s,0.51s;
                transition-property:transform,margin;
                transition-duration:0.51s,0.51s;
                position:relative;
                z-index:100;

}

ul#karten li#karte a:hover{
                background-position: bottom left;
                margin:-30px 0 0 -5px;
}


ul#karten li#karte_rueckseite a{
                float: left;
                width:467px;
                height:220px;
                background-image:url(NAVI/karte_rueckseite.png);
                margin: -15px 0 0 -200px;
                -webkit-transition:-webkit-transform 0.51s,margin 0.51s;
                -o-transition-property:width,height,-o-transform, margin;
                -o-transition-duration:0.51s,0.51s;
                -moz-transition-property:-o-transform, margin;
                -moz-transition-duration:0.51s,0.51s;
                transition-property:transform,margin;
                transition-duration:0.51s,0.51s;
                position:relative;
                z-index:99;
}

ul#karten li#karte_rueckseite a:hover{
                background-position: bottom left;
                margin:-30px 0 0 -200px;
}



ul#nav{
        margin:0px;
        min-width:920px;
        display: block;
        list-style-type: none;

}
ul#nav li{
        float: left;
}
ul#nav li a{
        display: block;
}
ul#nav li a span{
        display: none;
}


ul#nav li#uhr a{
                float: left;
                width: 181px;
                height: 88px;
                background-image:url(NAVI/uhr.png);

                margin: 155px 0 0 -640px;
                -webkit-transition:-webkit-transform 0.51s,margin 0.51s;
                -o-transition-property:width,height,-o-transform, margin;
                -o-transition-duration:0.51s,0.51s;
                -moz-transition-property:-o-transform, margin;
                -moz-transition-duration:0.51s,0.51s;
                transition-property:transform,margin;
                transition-duration:0.51s,0.51s;
                position:relative;
                z-index:150;
}

ul#nav li#uhr a:hover{
                background-position: bottom left;
                margin: 145px 0 0 -640px;
}



ul#nav li#texte a{
                float: left;
                width: 202px;
                height: 83px;
                background-image:url(NAVI/texte.png);

                margin: 155px 0 0 -490px;
                -webkit-transition:-webkit-transform 0.51s,margin 0.51s;
                -o-transition-property:width,height,-o-transform, margin;
                -o-transition-duration:0.51s,0.51s;
                -moz-transition-property:-o-transform, margin;
                -moz-transition-duration:0.51s,0.51s;
                transition-property:transform,margin;
                transition-duration:0.51s,0.51s;
                position:relative;
                z-index:150;
}

ul#nav li#texte a:hover{
                background-position: bottom left;
                margin: 145px 0 0 -490px;
}



ul#nav li#atelier a{
                float: left;
                width: 280px;
                height: 78px;
                background-image:url(NAVI/caloja_overmans.png);

                margin: 165px 0 0 -315px;
                -webkit-transition:-webkit-transform 0.51s,margin 0.51s;
                -o-transition-property:width,height,-o-transform, margin;
                -o-transition-duration:0.51s,0.51s;
                -moz-transition-property:-o-transform, margin;
                -moz-transition-duration:0.51s,0.51s;
                transition-property:transform,margin;
                transition-duration:0.51s,0.51s;
                position:relative;
                z-index:150;
}

ul#nav li#atelier a:hover{
                background-position: bottom left;
                margin: 150px 0 0 -315px;
}


ul#nav li#zurperson a{
                float: left;
                width: 89px;
                height: 74px;
                background-image:url(NAVI/zurperson.png);

                margin: 160px 0 0 -50px;
                -webkit-transition:-webkit-transform 0.51s,margin 0.51s;
                -o-transition-property:width,height,-o-transform, margin;
                -o-transition-duration:0.51s,0.51s;
                -moz-transition-property:-o-transform, margin;
                -moz-transition-duration:0.51s,0.51s;
                transition-property:transform,margin;
                transition-duration:0.51s,0.51s;
                position:relative;
                z-index:150;
}

ul#nav li#zurperson a:hover{
                background-position: bottom left;
                margin: 150px 0 0 -50px;
}


ul#nav li#bestellen a{
                float: left;
                width: 150px;
                height: 66px;
                background-image:url(NAVI/bestellen.png);

                margin: 175px 10px 0 15px;
                -webkit-transition:-webkit-transform 0.51s,margin 0.51s;
                -o-transition-property:width,height,-o-transform, margin;
                -o-transition-duration:0.51s,0.51s;
                -moz-transition-property:-o-transform, margin;
                -moz-transition-duration:0.51s,0.51s;
                transition-property:transform,margin;
                transition-duration:0.51s,0.51s;
                position:relative;
                z-index:150;
}

ul#nav li#bestellen a:hover{
                background-position: bottom left;
                margin: 165px 10px 0 15px;
}




/*MENUE ENDE*/

#taschenuhr{
        margin:15px 250px 0 auto;
        position:absolute;
        right:0px;
        z-index:510;

}

#deckel{
        width:150px;
        height:150px;
        background-image:url(PIC/deckel.png);
        background-repeat:no-repeat;
        margin:15px 250px 0 auto;
        position:absolute;
        right:0px;
        z-index:511;
}

#deckel:hover{
        width:150px;
        height:150px;
        background-image:url(PIC/deckel_uhr.png);
        background-repeat:no-repeat;
        margin:15px 250px 0 auto;
        position:absolute;
        right:0px;
        z-index:511;
}

#taschenuhrschatten{
        width:150px;
        height:150px;
        background-image:url(PIC/taschenuhr_schatten.png);
        background-repeat:no-repeat;
        margin:15px 250px 0 auto;
        position:absolute;
        right:0px;
        z-index:509;
}

#video{
        width:750px;
        height:450px;
        margin:0px auto 0 auto;
        position:relative;
        z-index:109;
}

#ipad{
        width: 793px;
        height: 602px;
        background-image:url(PIC/ipad.png);
        margin:-535px auto 0 auto;
        position:relative;
        z-index:108;
}


#bg_top {
        margin:-195px auto 0 auto;
        width:950px;
        height: 288px;
        background-image:url(PIC/loseblaetter_top.png);
        background-repeat: no-repeat;
        position:relative;
        z-index:10;
}

#mainwrapper {
        margin: -195px auto 0 auto;
        width:920px;
        padding: 0 0 20px 0;
        position:relative;
        z-index:1000;

}


#mainheader {
        background-image:url(PIC/mainheader_bg.png);
        background-repeat:no-repeat;
        margin: -200px 0 0 0;
        width:920px;
        height:43px;
        position:relative;
        z-index:1000;
}


#maincontent {
        background-image:url(PIC/maincontent_bg.png);
        background-repeat:repeat-y;
        width:800px;
        margin:-20px 0 0 0;
        padding: 0 60px 30px 60px;
        position:relative;
        z-index:1000;
}


.buecher_wrapper {
        width:750px;
        float:left;
}



.cell_cards {
        margin:0;
        float:left;
        width:400px;
        min-height:230px;
        max-height:350px;
        text-align: left;
}

.cell_springender_punkt {
        margin:0;
        float:left;
        width:650px;
        height:100px;
        text-align: left;
  vertical-align: top;
}

.cell1_springender_punkt {
        width:450px;
}

.cell2_springender_punkt {
        width:150px;
}

.tabletop {
        vertical-align: top;
}


.stuhlmouseover{
        width:181px;
        height: 303px;
        background-image:url(PIC/stuhl.jpg);
        background-repeat:no-repeat;
        padding: 15px 15px 15px 0;
        float:left;
}


.stuhlmouseover:hover{
        width:181px;
        height: 303px;
        background-image:url(PIC/stuhl2.jpg);
        background-repeat:no-repeat;
        padding: 15px 15px 15px 0;
        float:left;
}


.names {
        font-family: "Tahoma", "Helvetica","Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
    font-size: 12px;
        float:left;
        clear: both;
}


.leseprobe {
        width:200px;
        font-family: "Tahoma", "Helvetica","Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
    font-size: 11px;
        text-align:center;
        clear: both;
        color:#1a3059;
}


.ueberschrift {
        margin:0px;
        text-align:left;
        font-family: Tahoma, "Helvetica","Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
    font-size: 13px;
    line-height: 22px;
          letter-spacing: 0.01em;
        color:#000;
}


.text {
        width:800px;
        margin:0px;
        text-align:left;
        font-family: 'Tahoma', "Helvetica", "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
    font-size: 13px;
    line-height: 22px;
          letter-spacing: 0.01em;
        color:#000;

        -moz-column-count:2; /* Firefox */
        -webkit-column-count:2; /* Safari and Chrome */
        column-count:2;
        -moz-column-gap:40px; /* Firefox */
        -webkit-column-gap:40px; /* Safari and Chrome */
        column-gap:40px;
}

.text_nocolumns {
        width:800px;
        margin:0px;
        text-align:left;
        font-family: "Tahoma", "Helvetica", "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
    font-size: 13px;
    line-height: 22px;
          letter-spacing: 0.01em;
        color:#000;
}


.text_manuell {
        width:800px;
        margin:0px;
        text-align:left;
        font-family: "Tahoma", Helvetica,"Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
    font-size: 13px;
    line-height: 22px;
          letter-spacing: 0.01em;
        color:#000;
}

.spalten_manuell_links {
        width:370px;
        margin:0px;
        text-align:left;
        font-family: "Tahoma", Helvetica,"Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
    font-size: 13px;
    line-height: 22px;
          letter-spacing: 0.01em;
        color:#000;
        float:left;
}


.spalten_manuell_links_200 {
        width:200px;
        margin:0px;
        text-align:left;
        font-family: "Tahoma", Helvetica,"Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
    font-size: 13px;
    line-height: 22px;
          letter-spacing: 0.01em;
        color:#000;
        float:left;
}


.spalten_manuell_rechts {
        width:370px;
        margin:0 0 0 50px;
        text-align:left;
        font-family: "Tahoma", "Helvetica","Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
    font-size: 13px;
    line-height: 22px;
          letter-spacing: 0.01em;
        color:#000;
        float:left;
}


.animation {
        width:450px;
        height:333px;
        float:left;
}

.ani1 {
        width:450px;
        height:333px;
        float:left;
        background-image:url(PIC/ANI/01.jpg);

        animation: ani1 10s;
        -moz-animation: ani1 10s; /* Firefox */
        -webkit-animation: ani1 10s; /* Safari and Chrome */
        -o-animation: ani1 10s; /* Opera */
}

@keyframes ani1
        {
        0%   {opacity: 1.0;}
        25%  {opacity: 1.0;}
        50%  {opacity: 0.0;}
        100% {opacity: 0.0;}
        }

        @-moz-keyframes ani1 /* Firefox */
        {
        0%   {opacity: 1.0;}
        25%  {opacity: 1.0;}
        50%  {opacity: 0.0;}
        100% {opacity: 0.0;}
        }

        @-webkit-keyframes ani1 /* Safari and Chrome */
        {
        0%   {opacity: 1.0;}
        25%  {opacity: 1.0;}
        50%  {opacity: 0.0;}
        100% {opacity: 0.0;}
        }

        @-o-keyframes ani1 /* Opera */
        {
        0%   {opacity: 1.0;}
        25%  {opacity: 1.0;}
        50%  {opacity: 0.0;}
        100% {opacity: 0.0;}
        }

.ani2 {
        width:450px;
        height:333px;
        float:left;
        margin:-333px 0 0 0;
        background-image:url(PIC/ANI/02.jpg);

        animation: ani2 10s;
        -moz-animation: ani2 10s; /* Firefox */
        -webkit-animation: ani2 10s; /* Safari and Chrome */
        -o-animation: ani2 10s; /* Opera */
}

@keyframes ani2
        {
        0%   {opacity: 0.0;}
        25%  {opacity: 0.0;}
        50%  {opacity: 1.0;}
        65%  {opacity: 1.0;}
        85%  {opacity: 0.0;}
        100% {opacity: 0.0;}
        }

        @-moz-keyframes ani2 /* Firefox */
        {
        0%   {opacity: 0.0;}
        25%  {opacity: 0.0;}
        50%  {opacity: 1.0;}
        65%  {opacity: 1.0;}
        85%  {opacity: 0.0;}
        100% {opacity: 0.0;}
        }

        @-webkit-keyframes ani2 /* Safari und Chrome */
        {
        0%   {opacity: 0.0;}
        25%  {opacity: 0.0;}
        50%  {opacity: 1.0;}
        65%  {opacity: 1.0;}
        85%  {opacity: 0.0;}
        100% {opacity: 0.0;}
        }

        @-o-keyframes ani2 /* Opera */
        {
        0%   {opacity: 0.0;}
        25%  {opacity: 0.0;}
        50%  {opacity: 1.0;}
        65%  {opacity: 1.0;}
        85%  {opacity: 0.0;}
        100% {opacity: 0.0;}
        }


.ani3 {
        width:450px;
        height:333px;
        float:left;
        margin:-333px 0 0 0;
        background-image:url(PIC/ANI/03.jpg);

        animation: ani3 10s;
        -moz-animation: ani3 10s; /* Firefox */
        -webkit-animation: ani3 10s; /* Safari and Chrome */
        -o-animation: ani3 10s; /* Opera */
}

@keyframes ani3
        {
        0%   {opacity: 0.0;}
        65%  {opacity: 0.0;}
        85%  {opacity: 1.0;}
        100% {opacity: 1.0;}
        }

        @-moz-keyframes ani3 /* Firefox */
        {
        0%   {opacity: 0.0;}
        65%  {opacity: 0.0;}
        85%  {opacity: 1.0;}
        100% {opacity: 1.0;}
        }

        @-webkit-keyframes ani3 /* Safari und Chrome */
        {
        0%   {opacity: 0.0;}
        65%  {opacity: 0.0;}
        85%  {opacity: 1.0;}
        100% {opacity: 1.0;}
        }

        @-o-keyframes ani3 /* Opera */
        {
        0%   {opacity: 0.0;}
        65%  {opacity: 0.0;}
        85%  {opacity: 1.0;}
        100% {opacity: 1.0;}
        }


.ani_springender_punkt {
        width:150px;
        height:111px;
        float:right;
  animation-iteration-count: infinite;
  animation-fill-mode: none
}

.ani_sp1 {
  width:150px;
        height:111px;
        float:right;
        background-image:url(PIC/ANI/ani_sp1.jpg);

        animation: ani_sp1 0.4s infinite;
        -moz-animation: ani_sp1 0.4s infinite; /* Firefox */
        -webkit-animation: ani_sp1 0.4s infinite; /* Safari and Chrome */
        -o-animation: ani_sp11 0.4s infinite; /* Opera */
}

@keyframes ani_sp1
        {
    0%   {opacity: 1.0;}
    50%  {opacity: 0.0;}
    100% {opacity: 1.0;}
        }

        @-moz-keyframes ani_sp1 /* Firefox */
        {
    0%   {opacity: 1.0;}
    50%  {opacity: 0.0;}
    100% {opacity: 1.0;}
        }

        @-webkit-keyframes ani_sp1 /* Safari and Chrome */
        {
    0%   {opacity: 1.0;}
    50%  {opacity: 0.0;}
    100% {opacity: 1.0;}
        }

        @-o-keyframes ani_sp1 /* Opera */
        {
    0%   {opacity: 1.0;}
    50%  {opacity: 0.0;}
    100% {opacity: 1.0;}
        }

.ani_sp2 {
  width:150px;
        height:111px;
        float:right;
        margin:-111px 0 0 0;
        background-image:url(PIC/ANI/ani_sp2.jpg);

        animation: ani_sp2 0.4s infinite;
        -moz-animation: ani_sp2 0.4s infinite; /* Firefox */
        -webkit-animation: ani_sp2 0.4s infinite; /* Safari and Chrome */
        -o-animation: ani_sp2 0.4s infinite; /* Opera */
}

@keyframes ani_sp2
        {
    0%   {opacity: 0.0;}
    50%  {opacity: 1.0;}
    100% {opacity: 0.0;}
        }

        @-moz-keyframes ani_sp2 /* Firefox */
        {
    0%   {opacity: 0.0;}
    50%  {opacity: 1.0;}
    100% {opacity: 0.0;}
        }

        @-webkit-keyframes ani_sp2 /* Safari und Chrome */
        {
    0%   {opacity: 0.0;}
    50%  {opacity: 1.0;}
    100% {opacity: 0.0;}
        }

        @-o-keyframes ani_sp2 /* Opera */
        {
    0%   {opacity: 0.0;}
    50%  {opacity: 1.0;}
    100% {opacity: 0.0;}
        }

/* ------------------ */
/* Anfang roter Faden */

.ani_roter_faden {
  width:320px;
        height:240px;
        float:right;
  animation-iteration-count: infinite;
  animation-fill-mode: none
}

.ani_rf1 {
  width:320px;
        height:240px;
        float:right;
        background-image:url(PIC/ANI/roter_faden_01.jpg);

        animation: ani_rf1 20s infinite;
        -moz-animation: ani_rf1 20s infinite; /* Firefox */
        -webkit-animation: ani_rf1 20s infinite; /* Safari and Chrome */
        -o-animation: ani_rf1 20s infinite; /* Opera */
}

@keyframes ani_rf1
        {
    0%   {opacity: 1.0;}
    8%   {opacity: 1.0;}
    16%  {opacity: 0.0;}
    24%  {opacity: 0.0;}
    32%  {opacity: 0.0;}
    40%  {opacity: 0.0;}
    48%  {opacity: 0.0;}
    56%  {opacity: 0.0;}
    64%  {opacity: 0.0;}
    72%  {opacity: 0.0;}
    80%  {opacity: 0.0;}
    88%  {opacity: 0.0;}
    96%  {opacity: 0.0;}
    100% {opacity: 0.0;}
        }

        @-moz-keyframes ani_rf1 /* Firefox */
        {
    0%   {opacity: 1.0;}
    8%   {opacity: 1.0;}
    16%  {opacity: 0.0;}
    24%  {opacity: 0.0;}
    32%  {opacity: 0.0;}
    40%  {opacity: 0.0;}
    48%  {opacity: 0.0;}
    56%  {opacity: 0.0;}
    64%  {opacity: 0.0;}
    72%  {opacity: 0.0;}
    80%  {opacity: 0.0;}
    88%  {opacity: 0.0;}
    96%  {opacity: 0.0;}
    100% {opacity: 0.0;}
        }

        @-webkit-keyframes ani_rf1 /* Safari and Chrome */
        {
    0%   {opacity: 1.0;}
    8%   {opacity: 1.0;}
    16%  {opacity: 0.0;}
    24%  {opacity: 0.0;}
    32%  {opacity: 0.0;}
    40%  {opacity: 0.0;}
    48%  {opacity: 0.0;}
    56%  {opacity: 0.0;}
    64%  {opacity: 0.0;}
    72%  {opacity: 0.0;}
    80%  {opacity: 0.0;}
    88%  {opacity: 0.0;}
    96%  {opacity: 0.0;}
    100% {opacity: 0.0;}
        }

        @-o-keyframes ani_rf1 /* Opera */
        {
    0%   {opacity: 1.0;}
    8%   {opacity: 1.0;}
    16%  {opacity: 0.0;}
    24%  {opacity: 0.0;}
    32%  {opacity: 0.0;}
    40%  {opacity: 0.0;}
    48%  {opacity: 0.0;}
    56%  {opacity: 0.0;}
    64%  {opacity: 0.0;}
    72%  {opacity: 0.0;}
    80%  {opacity: 0.0;}
    88%  {opacity: 0.0;}
    96%  {opacity: 0.0;}
    100% {opacity: 0.0;}
        }

.ani_rf2 {
  width:320px;
        height:240px;
        float:right;
  margin:-240px 0 0 0;
  background-image:url(PIC/ANI/roter_faden_02.jpg);

        animation: ani_rf2 20s infinite;
        -moz-animation: ani_rf2 20s infinite; /* Firefox */
        -webkit-animation: ani_rf2 20s infinite; /* Safari and Chrome */
        -o-animation: ani_rf2 20s infinite; /* Opera */
  }

@keyframes ani_rf2
        {
    0%   {opacity: 0.0;}
    8%   {opacity: 0.0;}
    16%  {opacity: 1.0;}
    24%  {opacity: 0.0;}
    32%  {opacity: 0.0;}
    40%  {opacity: 0.0;}
    48%  {opacity: 0.0;}
    56%  {opacity: 0.0;}
    64%  {opacity: 0.0;}
    72%  {opacity: 0.0;}
    80%  {opacity: 0.0;}
    88%  {opacity: 0.0;}
    96%  {opacity: 0.0;}
    100% {opacity: 0.0;}
        }

        @-moz-keyframes ani_rf2 /* Firefox */
        {
    0%   {opacity: 0.0;}
    8%   {opacity: 0.0;}
    16%  {opacity: 1.0;}
    24%  {opacity: 0.0;}
    32%  {opacity: 0.0;}
    40%  {opacity: 0.0;}
    48%  {opacity: 0.0;}
    56%  {opacity: 0.0;}
    64%  {opacity: 0.0;}
    72%  {opacity: 0.0;}
    80%  {opacity: 0.0;}
    88%  {opacity: 0.0;}
    96%  {opacity: 0.0;}
    100% {opacity: 0.0;}
        }

        @-webkit-keyframes ani_rf2 /* Safari und Chrome */
        {
    0%   {opacity: 0.0;}
    8%   {opacity: 0.0;}
    16%  {opacity: 1.0;}
    24%  {opacity: 0.0;}
    32%  {opacity: 0.0;}
    40%  {opacity: 0.0;}
    48%  {opacity: 0.0;}
    56%  {opacity: 0.0;}
    64%  {opacity: 0.0;}
    72%  {opacity: 0.0;}
    80%  {opacity: 0.0;}
    88%  {opacity: 0.0;}
    96%  {opacity: 0.0;}
    100% {opacity: 0.0;}
        }

        @-o-keyframes ani_rf2 /* Opera */
        {
    0%   {opacity: 0.0;}
    8%   {opacity: 0.0;}
    16%  {opacity: 1.0;}
    24%  {opacity: 0.0;}
    32%  {opacity: 0.0;}
    40%  {opacity: 0.0;}
    48%  {opacity: 0.0;}
    56%  {opacity: 0.0;}
    64%  {opacity: 0.0;}
    72%  {opacity: 0.0;}
    80%  {opacity: 0.0;}
    88%  {opacity: 0.0;}
    96%  {opacity: 0.0;}
    100% {opacity: 0.0;}
        }

.ani_rf3 {
  width:320px;
        height:240px;
        float:right;
  margin:-240px 0 0 0;
  background-image:url(PIC/ANI/roter_faden_03.jpg);

        animation: ani_rf3 20s infinite;
        -moz-animation: ani_rf3 20s infinite; /* Firefox */
        -webkit-animation: ani_rf3 20s infinite; /* Safari and Chrome */
        -o-animation: ani_rf3 20s infinite; /* Opera */
  }

@keyframes ani_rf3
  {
    0%   {opacity: 0.0;}
    8%   {opacity: 0.0;}
    16%  {opacity: 0.0;}
    24%  {opacity: 1.0;}
    32%  {opacity: 0.0;}
    40%  {opacity: 0.0;}
    48%  {opacity: 0.0;}
    56%  {opacity: 0.0;}
    64%  {opacity: 0.0;}
    72%  {opacity: 0.0;}
    80%  {opacity: 0.0;}
    88%  {opacity: 0.0;}
    96%  {opacity: 0.0;}
    100% {opacity: 0.0;}
  }

  @-moz-keyframes ani_rf3 /* Firefox */
  {
    0%   {opacity: 0.0;}
    8%   {opacity: 0.0;}
    16%  {opacity: 0.0;}
    24%  {opacity: 1.0;}
    32%  {opacity: 0.0;}
    40%  {opacity: 0.0;}
    48%  {opacity: 0.0;}
    56%  {opacity: 0.0;}
    64%  {opacity: 0.0;}
    72%  {opacity: 0.0;}
    80%  {opacity: 0.0;}
    88%  {opacity: 0.0;}
    96%  {opacity: 0.0;}
    100% {opacity: 0.0;}
  }

  @-webkit-keyframes ani_rf3 /* Safari und Chrome */
  {
    0%   {opacity: 0.0;}
    8%   {opacity: 0.0;}
    16%  {opacity: 0.0;}
    24%  {opacity: 1.0;}
    32%  {opacity: 0.0;}
    40%  {opacity: 0.0;}
    48%  {opacity: 0.0;}
    56%  {opacity: 0.0;}
    64%  {opacity: 0.0;}
    72%  {opacity: 0.0;}
    80%  {opacity: 0.0;}
    88%  {opacity: 0.0;}
    96%  {opacity: 0.0;}
    100% {opacity: 0.0;}
  }

  @-o-keyframes ani_rf3 /* Opera */
  {
    0%   {opacity: 0.0;}
    8%   {opacity: 0.0;}
    16%  {opacity: 0.0;}
    24%  {opacity: 1.0;}
    32%  {opacity: 0.0;}
    40%  {opacity: 0.0;}
    48%  {opacity: 0.0;}
    56%  {opacity: 0.0;}
    64%  {opacity: 0.0;}
    72%  {opacity: 0.0;}
    80%  {opacity: 0.0;}
    88%  {opacity: 0.0;}
    96%  {opacity: 0.0;}
    100% {opacity: 0.0;}
  }

.ani_rf4 {
  width:320px;
  height:240px;
  float:right;
  margin:-240px 0 0 0;
  background-image:url(PIC/ANI/roter_faden_04.jpg);

  animation: ani_rf4 20s infinite;
  -moz-animation: ani_rf4 20s infinite; /* Firefox */
  -webkit-animation: ani_rf4 20s infinite; /* Safari and Chrome */
  -o-animation: ani_rf4 20s infinite; /* Opera */
  }

@keyframes ani_rf4
  {
    0%   {opacity: 0.0;}
    8%   {opacity: 0.0;}
    16%  {opacity: 0.0;}
    24%  {opacity: 0.0;}
    32%  {opacity: 1.0;}
    40%  {opacity: 0.0;}
    48%  {opacity: 0.0;}
    56%  {opacity: 0.0;}
    64%  {opacity: 0.0;}
    72%  {opacity: 0.0;}
    80%  {opacity: 0.0;}
    88%  {opacity: 0.0;}
    96%  {opacity: 0.0;}
    100% {opacity: 0.0;}
  }

  @-moz-keyframes ani_rf4 /* Firefox */
  {
    0%   {opacity: 0.0;}
    8%   {opacity: 0.0;}
    16%  {opacity: 0.0;}
    24%  {opacity: 0.0;}
    32%  {opacity: 1.0;}
    40%  {opacity: 0.0;}
    48%  {opacity: 0.0;}
    56%  {opacity: 0.0;}
    64%  {opacity: 0.0;}
    72%  {opacity: 0.0;}
    80%  {opacity: 0.0;}
    88%  {opacity: 0.0;}
    96%  {opacity: 0.0;}
    100% {opacity: 0.0;}
  }

  @-webkit-keyframes ani_rf4 /* Safari und Chrome */
  {
    0%   {opacity: 0.0;}
    8%   {opacity: 0.0;}
    16%  {opacity: 0.0;}
    24%  {opacity: 0.0;}
    32%  {opacity: 1.0;}
    40%  {opacity: 0.0;}
    48%  {opacity: 0.0;}
    56%  {opacity: 0.0;}
    64%  {opacity: 0.0;}
    72%  {opacity: 0.0;}
    80%  {opacity: 0.0;}
    88%  {opacity: 0.0;}
    96%  {opacity: 0.0;}
    100% {opacity: 0.0;}
  }

  @-o-keyframes ani_rf4 /* Opera */
  {
    0%   {opacity: 0.0;}
    8%   {opacity: 0.0;}
    16%  {opacity: 0.0;}
    24%  {opacity: 0.0;}
    32%  {opacity: 1.0;}
    40%  {opacity: 0.0;}
    48%  {opacity: 0.0;}
    56%  {opacity: 0.0;}
    64%  {opacity: 0.0;}
    72%  {opacity: 0.0;}
    80%  {opacity: 0.0;}
    88%  {opacity: 0.0;}
    96%  {opacity: 0.0;}
    100% {opacity: 0.0;}
  }


  .ani_rf5 {
    width:320px;
    height:240px;
    float:right;
    margin:-240px 0 0 0;
    background-image:url(PIC/ANI/roter_faden_05.jpg);

    animation: ani_rf5 20s infinite;
    -moz-animation: ani_rf5 20s infinite; /* Firefox */
    -webkit-animation: ani_rf5 20s infinite; /* Safari and Chrome */
    -o-animation: ani_rf5 20s infinite; /* Opera */
    }

  @keyframes ani_rf5
    {
      0%   {opacity: 0.0;}
      8%   {opacity: 0.0;}
      16%  {opacity: 0.0;}
      24%  {opacity: 0.0;}
      32%  {opacity: 0.0;}
      40%  {opacity: 1.0;}
      48%  {opacity: 0.0;}
      56%  {opacity: 0.0;}
      64%  {opacity: 0.0;}
      72%  {opacity: 0.0;}
      80%  {opacity: 0.0;}
      88%  {opacity: 0.0;}
      96%  {opacity: 0.0;}
      100% {opacity: 0.0;}
    }

    @-moz-keyframes ani_rf5 /* Firefox */
    {
      0%   {opacity: 0.0;}
      8%   {opacity: 0.0;}
      16%  {opacity: 0.0;}
      24%  {opacity: 0.0;}
      32%  {opacity: 0.0;}
      40%  {opacity: 1.0;}
      48%  {opacity: 0.0;}
      56%  {opacity: 0.0;}
      64%  {opacity: 0.0;}
      72%  {opacity: 0.0;}
      80%  {opacity: 0.0;}
      88%  {opacity: 0.0;}
      96%  {opacity: 0.0;}
      100% {opacity: 0.0;}
    }

    @-webkit-keyframes ani_rf5 /* Safari und Chrome */
    {
      0%   {opacity: 0.0;}
      8%   {opacity: 0.0;}
      16%  {opacity: 0.0;}
      24%  {opacity: 0.0;}
      32%  {opacity: 0.0;}
      40%  {opacity: 1.0;}
      48%  {opacity: 0.0;}
      56%  {opacity: 0.0;}
      64%  {opacity: 0.0;}
      72%  {opacity: 0.0;}
      80%  {opacity: 0.0;}
      88%  {opacity: 0.0;}
      96%  {opacity: 0.0;}
      100% {opacity: 0.0;}
    }

    @-o-keyframes ani_rf5  /* Opera */
    {
      0%   {opacity: 0.0;}
      8%   {opacity: 0.0;}
      16%  {opacity: 0.0;}
      24%  {opacity: 0.0;}
      32%  {opacity: 0.0;}
      40%  {opacity: 1.0;}
      48%  {opacity: 0.0;}
      56%  {opacity: 0.0;}
      64%  {opacity: 0.0;}
      72%  {opacity: 0.0;}
      80%  {opacity: 0.0;}
      88%  {opacity: 0.0;}
      96%  {opacity: 0.0;}
      100% {opacity: 0.0;}
  }


  .ani_rf6 {
    width:320px;
    height:240px;
    float:right;
    margin:-240px 0 0 0;
    background-image:url(PIC/ANI/roter_faden_06.jpg);

    animation: ani_rf6 20s infinite;
    -moz-animation: ani_rf6 20s infinite; /* Firefox */
    -webkit-animation: ani_rf6 20s infinite; /* Safari and Chrome */
    -o-animation: ani_rf6 20s infinite; /* Opera */
    }

  @keyframes ani_rf6
    {
      0%   {opacity: 0.0;}
      8%   {opacity: 0.0;}
      16%  {opacity: 0.0;}
      24%  {opacity: 0.0;}
      32%  {opacity: 0.0;}
      40%  {opacity: 0.0;}
      48%  {opacity: 1.0;}
      56%  {opacity: 0.0;}
      64%  {opacity: 0.0;}
      72%  {opacity: 0.0;}
      80%  {opacity: 0.0;}
      88%  {opacity: 0.0;}
      96%  {opacity: 0.0;}
      100% {opacity: 0.0;}
    }

    @-moz-keyframes ani_rf6 /* Firefox */
    {
      0%   {opacity: 0.0;}
      8%   {opacity: 0.0;}
      16%  {opacity: 0.0;}
      24%  {opacity: 0.0;}
      32%  {opacity: 0.0;}
      40%  {opacity: 0.0;}
      48%  {opacity: 1.0;}
      56%  {opacity: 0.0;}
      64%  {opacity: 0.0;}
      72%  {opacity: 0.0;}
      80%  {opacity: 0.0;}
      88%  {opacity: 0.0;}
      96%  {opacity: 0.0;}
      100% {opacity: 0.0;}
    }

    @-webkit-keyframes ani_rf6 /* Safari und Chrome */
    {
      0%   {opacity: 0.0;}
      8%   {opacity: 0.0;}
      16%  {opacity: 0.0;}
      24%  {opacity: 0.0;}
      32%  {opacity: 0.0;}
      40%  {opacity: 0.0;}
      48%  {opacity: 1.0;}
      56%  {opacity: 0.0;}
      64%  {opacity: 0.0;}
      72%  {opacity: 0.0;}
      80%  {opacity: 0.0;}
      88%  {opacity: 0.0;}
      96%  {opacity: 0.0;}
      100% {opacity: 0.0;}
    }

    @-o-keyframes ani_rf6  /* Opera */
    {
      0%   {opacity: 0.0;}
      8%   {opacity: 0.0;}
      16%  {opacity: 0.0;}
      24%  {opacity: 0.0;}
      32%  {opacity: 0.0;}
      40%  {opacity: 0.0;}
      48%  {opacity: 1.0;}
      56%  {opacity: 0.0;}
      64%  {opacity: 0.0;}
      72%  {opacity: 0.0;}
      80%  {opacity: 0.0;}
      88%  {opacity: 0.0;}
      96%  {opacity: 0.0;}
      100% {opacity: 0.0;}
  }

  .ani_rf7 {
    width:320px;
    height:240px;
    float:right;
    margin:-240px 0 0 0;
    background-image:url(PIC/ANI/roter_faden_07.jpg);

    animation: ani_rf7 20s infinite;
    -moz-animation: ani_rf7 20s infinite; /* Firefox */
    -webkit-animation: ani_rf7 20s infinite; /* Safari and Chrome */
    -o-animation: ani_rf7 20s infinite; /* Opera */
    }

  @keyframes ani_rf7
    {
      0%   {opacity: 0.0;}
      8%   {opacity: 0.0;}
      16%  {opacity: 0.0;}
      24%  {opacity: 0.0;}
      32%  {opacity: 0.0;}
      40%  {opacity: 0.0;}
      48%  {opacity: 0.0;}
      56%  {opacity: 1.0;}
      64%  {opacity: 0.0;}
      72%  {opacity: 0.0;}
      80%  {opacity: 0.0;}
      88%  {opacity: 0.0;}
      96%  {opacity: 0.0;}
      100% {opacity: 0.0;}
    }

    @-moz-keyframes ani_rf7 /* Firefox */
    {
      0%   {opacity: 0.0;}
      8%   {opacity: 0.0;}
      16%  {opacity: 0.0;}
      24%  {opacity: 0.0;}
      32%  {opacity: 0.0;}
      40%  {opacity: 0.0;}
      48%  {opacity: 0.0;}
      56%  {opacity: 1.0;}
      64%  {opacity: 0.0;}
      72%  {opacity: 0.0;}
      80%  {opacity: 0.0;}
      88%  {opacity: 0.0;}
      96%  {opacity: 0.0;}
      100% {opacity: 0.0;}
    }

    @-webkit-keyframes ani_rf7 /* Safari und Chrome */
    {
      0%   {opacity: 0.0;}
      8%   {opacity: 0.0;}
      16%  {opacity: 0.0;}
      24%  {opacity: 0.0;}
      32%  {opacity: 0.0;}
      40%  {opacity: 0.0;}
      48%  {opacity: 0.0;}
      56%  {opacity: 1.0;}
      64%  {opacity: 0.0;}
      72%  {opacity: 0.0;}
      80%  {opacity: 0.0;}
      88%  {opacity: 0.0;}
      96%  {opacity: 0.0;}
      100% {opacity: 0.0;}
    }

    @-o-keyframes ani_rf7  /* Opera */
    {
      0%   {opacity: 0.0;}
      8%   {opacity: 0.0;}
      16%  {opacity: 0.0;}
      24%  {opacity: 0.0;}
      32%  {opacity: 0.0;}
      40%  {opacity: 0.0;}
      48%  {opacity: 0.0;}
      56%  {opacity: 1.0;}
      64%  {opacity: 0.0;}
      72%  {opacity: 0.0;}
      80%  {opacity: 0.0;}
      88%  {opacity: 0.0;}
      96%  {opacity: 0.0;}
      100% {opacity: 0.0;}
  }

  .ani_rf8 {
    width:320px;
    height:240px;
    float:right;
    margin:-240px 0 0 0;
    background-image:url(PIC/ANI/roter_faden_08.jpg);

    animation: ani_rf8 20s infinite;
    -moz-animation: ani_rf8 20s infinite; /* Firefox */
    -webkit-animation: ani_rf8 20s infinite; /* Safari and Chrome */
    -o-animation: ani_rf8 20s infinite; /* Opera */
    }

  @keyframes ani_rf8
    {
      0%   {opacity: 0.0;}
      8%   {opacity: 0.0;}
      16%  {opacity: 0.0;}
      24%  {opacity: 0.0;}
      32%  {opacity: 0.0;}
      40%  {opacity: 0.0;}
      48%  {opacity: 0.0;}
      56%  {opacity: 0.0;}
      64%  {opacity: 1.0;}
      72%  {opacity: 0.0;}
      80%  {opacity: 0.0;}
      88%  {opacity: 0.0;}
      96%  {opacity: 0.0;}
      100% {opacity: 0.0;}
    }

    @-moz-keyframes ani_rf8 /* Firefox */
    {
      0%   {opacity: 0.0;}
      8%   {opacity: 0.0;}
      16%  {opacity: 0.0;}
      24%  {opacity: 0.0;}
      32%  {opacity: 0.0;}
      40%  {opacity: 0.0;}
      48%  {opacity: 0.0;}
      56%  {opacity: 0.0;}
      64%  {opacity: 1.0;}
      72%  {opacity: 0.0;}
      80%  {opacity: 0.0;}
      88%  {opacity: 0.0;}
      96%  {opacity: 0.0;}
      100% {opacity: 0.0;}
    }

    @-webkit-keyframes ani_rf8 /* Safari und Chrome */
    {
      0%   {opacity: 0.0;}
      8%   {opacity: 0.0;}
      16%  {opacity: 0.0;}
      24%  {opacity: 0.0;}
      32%  {opacity: 0.0;}
      40%  {opacity: 0.0;}
      48%  {opacity: 0.0;}
      56%  {opacity: 0.0;}
      64%  {opacity: 1.0;}
      72%  {opacity: 0.0;}
      80%  {opacity: 0.0;}
      88%  {opacity: 0.0;}
      96%  {opacity: 0.0;}
      100% {opacity: 0.0;}
    }

    @-o-keyframes ani_rf8  /* Opera */
    {
      0%   {opacity: 0.0;}
      8%   {opacity: 0.0;}
      16%  {opacity: 0.0;}
      24%  {opacity: 0.0;}
      32%  {opacity: 0.0;}
      40%  {opacity: 0.0;}
      48%  {opacity: 0.0;}
      56%  {opacity: 0.0;}
      64%  {opacity: 1.0;}
      72%  {opacity: 0.0;}
      80%  {opacity: 0.0;}
      88%  {opacity: 0.0;}
      96%  {opacity: 0.0;}
      100% {opacity: 0.0;}
  }

  .ani_rf9 {
    width:320px;
    height:240px;
    float:right;
    margin:-240px 0 0 0;
    background-image:url(PIC/ANI/roter_faden_09.jpg);

    animation: ani_rf9 20s infinite;
    -moz-animation: ani_rf9 20s infinite; /* Firefox */
    -webkit-animation: ani_rf9 20s infinite; /* Safari and Chrome */
    -o-animation: ani_rf9 20s infinite; /* Opera */
    }

  @keyframes ani_rf9
    {
      0%   {opacity: 0.0;}
      8%   {opacity: 0.0;}
      16%  {opacity: 0.0;}
      24%  {opacity: 0.0;}
      32%  {opacity: 0.0;}
      40%  {opacity: 0.0;}
      48%  {opacity: 0.0;}
      56%  {opacity: 0.0;}
      64%  {opacity: 0.0;}
      72%  {opacity: 1.0;}
      80%  {opacity: 0.0;}
      88%  {opacity: 0.0;}
      96%  {opacity: 0.0;}
      100% {opacity: 0.0;}
    }

    @-moz-keyframes ani_rf9 /* Firefox */
    {
      0%   {opacity: 0.0;}
      8%   {opacity: 0.0;}
      16%  {opacity: 0.0;}
      24%  {opacity: 0.0;}
      32%  {opacity: 0.0;}
      40%  {opacity: 0.0;}
      48%  {opacity: 0.0;}
      56%  {opacity: 0.0;}
      64%  {opacity: 0.0;}
      72%  {opacity: 1.0;}
      80%  {opacity: 0.0;}
      88%  {opacity: 0.0;}
      96%  {opacity: 0.0;}
      100% {opacity: 0.0;}
    }

    @-webkit-keyframes ani_rf9 /* Safari und Chrome */
    {
      0%   {opacity: 0.0;}
      8%   {opacity: 0.0;}
      16%  {opacity: 0.0;}
      24%  {opacity: 0.0;}
      32%  {opacity: 0.0;}
      40%  {opacity: 0.0;}
      48%  {opacity: 0.0;}
      56%  {opacity: 0.0;}
      64%  {opacity: 0.0;}
      72%  {opacity: 1.0;}
      80%  {opacity: 0.0;}
      88%  {opacity: 0.0;}
      96%  {opacity: 0.0;}
      100% {opacity: 0.0;}
    }

    @-o-keyframes ani_rf9  /* Opera */
    {
      0%   {opacity: 0.0;}
      8%   {opacity: 0.0;}
      16%  {opacity: 0.0;}
      24%  {opacity: 0.0;}
      32%  {opacity: 0.0;}
      40%  {opacity: 0.0;}
      48%  {opacity: 0.0;}
      56%  {opacity: 0.0;}
      64%  {opacity: 0.0;}
      72%  {opacity: 1.0;}
      80%  {opacity: 0.0;}
      88%  {opacity: 0.0;}
      96%  {opacity: 0.0;}
      100% {opacity: 0.0;}
  }

  .ani_rf10 {
    width:320px;
    height:240px;
    float:right;
    margin:-240px 0 0 0;
    background-image:url(PIC/ANI/roter_faden_10.jpg);

    animation: ani_rf10 20s infinite;
    -moz-animation: ani_rf10 20s infinite; /* Firefox */
    -webkit-animation: ani_rf10 20s infinite; /* Safari and Chrome */
    -o-animation: ani_rf10 20s infinite; /* Opera */
    }

  @keyframes ani_rf10
    {
      0%   {opacity: 0.0;}
      8%   {opacity: 0.0;}
      16%  {opacity: 0.0;}
      24%  {opacity: 0.0;}
      32%  {opacity: 0.0;}
      40%  {opacity: 0.0;}
      48%  {opacity: 0.0;}
      56%  {opacity: 0.0;}
      64%  {opacity: 0.0;}
      72%  {opacity: 0.0;}
      80%  {opacity: 1.0;}
      88%  {opacity: 0.0;}
      96%  {opacity: 0.0;}
      100% {opacity: 0.0;}
    }

    @-moz-keyframes ani_rf10 /* Firefox */
    {
      0%   {opacity: 0.0;}
      8%   {opacity: 0.0;}
      16%  {opacity: 0.0;}
      24%  {opacity: 0.0;}
      32%  {opacity: 0.0;}
      40%  {opacity: 0.0;}
      48%  {opacity: 0.0;}
      56%  {opacity: 0.0;}
      64%  {opacity: 0.0;}
      72%  {opacity: 0.0;}
      80%  {opacity: 1.0;}
      88%  {opacity: 0.0;}
      96%  {opacity: 0.0;}
      100% {opacity: 0.0;}
    }

    @-webkit-keyframes ani_rf10 /* Safari und Chrome */
    {
      0%   {opacity: 0.0;}
      8%   {opacity: 0.0;}
      16%  {opacity: 0.0;}
      24%  {opacity: 0.0;}
      32%  {opacity: 0.0;}
      40%  {opacity: 0.0;}
      48%  {opacity: 0.0;}
      56%  {opacity: 0.0;}
      64%  {opacity: 0.0;}
      72%  {opacity: 0.0;}
      80%  {opacity: 1.0;}
      88%  {opacity: 0.0;}
      96%  {opacity: 0.0;}
      100% {opacity: 0.0;}
    }

    @-o-keyframes ani_rf10  /* Opera */
    {
      0%   {opacity: 0.0;}
      8%   {opacity: 0.0;}
      16%  {opacity: 0.0;}
      24%  {opacity: 0.0;}
      32%  {opacity: 0.0;}
      40%  {opacity: 0.0;}
      48%  {opacity: 0.0;}
      56%  {opacity: 0.0;}
      64%  {opacity: 0.0;}
      72%  {opacity: 0.0;}
      80%  {opacity: 1.0;}
      88%  {opacity: 0.0;}
      96%  {opacity: 0.0;}
      100% {opacity: 0.0;}
  }

  .ani_rf11 {
    width:320px;
    height:240px;
    float:right;
    margin:-240px 0 0 0;
    background-image:url(PIC/ANI/roter_faden_11.jpg);

    animation: ani_rf11 20s infinite;
    -moz-animation: ani_rf11 20s infinite; /* Firefox */
    -webkit-animation: ani_rf11 20s infinite; /* Safari and Chrome */
    -o-animation: ani_rf11 20s infinite; /* Opera */
    }

  @keyframes ani_rf11
    {
      0%   {opacity: 0.0;}
      8%   {opacity: 0.0;}
      16%  {opacity: 0.0;}
      24%  {opacity: 0.0;}
      32%  {opacity: 0.0;}
      40%  {opacity: 0.0;}
      48%  {opacity: 0.0;}
      56%  {opacity: 0.0;}
      64%  {opacity: 0.0;}
      72%  {opacity: 0.0;}
      80%  {opacity: 0.0;}
      88%  {opacity: 1.0;}
      96%  {opacity: 0.0;}
      100% {opacity: 0.0;}
    }

    @-moz-keyframes ani_rf11 /* Firefox */
    {
      0%   {opacity: 0.0;}
      8%   {opacity: 0.0;}
      16%  {opacity: 0.0;}
      24%  {opacity: 0.0;}
      32%  {opacity: 0.0;}
      40%  {opacity: 0.0;}
      48%  {opacity: 0.0;}
      56%  {opacity: 0.0;}
      64%  {opacity: 0.0;}
      72%  {opacity: 0.0;}
      80%  {opacity: 0.0;}
      88%  {opacity: 1.0;}
      96%  {opacity: 0.0;}
      100% {opacity: 0.0;}
    }

    @-webkit-keyframes ani_rf11 /* Safari und Chrome */
    {
      0%   {opacity: 0.0;}
      8%   {opacity: 0.0;}
      16%  {opacity: 0.0;}
      24%  {opacity: 0.0;}
      32%  {opacity: 0.0;}
      40%  {opacity: 0.0;}
      48%  {opacity: 0.0;}
      56%  {opacity: 0.0;}
      64%  {opacity: 0.0;}
      72%  {opacity: 0.0;}
      80%  {opacity: 0.0;}
      88%  {opacity: 1.0;}
      96%  {opacity: 0.0;}
      100% {opacity: 0.0;}
    }

    @-o-keyframes ani_rf11  /* Opera */
    {
      0%   {opacity: 0.0;}
      8%   {opacity: 0.0;}
      16%  {opacity: 0.0;}
      24%  {opacity: 0.0;}
      32%  {opacity: 0.0;}
      40%  {opacity: 0.0;}
      48%  {opacity: 0.0;}
      56%  {opacity: 0.0;}
      64%  {opacity: 0.0;}
      72%  {opacity: 0.0;}
      80%  {opacity: 0.0;}
      88%  {opacity: 1.0;}
      96%  {opacity: 0.0;}
      100% {opacity: 0.0;}
  }

  .ani_rf12 {
    width:320px;
    height:240px;
    float:right;
    margin:-240px 0 0 0;
    background-image:url(PIC/ANI/roter_faden_12.jpg);

    animation: ani_rf12 20s infinite;
    -moz-animation: ani_rf12 20s infinite; /* Firefox */
    -webkit-animation: ani_rf12 20s infinite; /* Safari and Chrome */
    -o-animation: ani_rf12 20s infinite; /* Opera */
    }

  @keyframes ani_rf12
    {
      0%   {opacity: 0.0;}
      8%   {opacity: 0.0;}
      16%  {opacity: 0.0;}
      24%  {opacity: 0.0;}
      32%  {opacity: 0.0;}
      40%  {opacity: 0.0;}
      48%  {opacity: 0.0;}
      56%  {opacity: 0.0;}
      64%  {opacity: 0.0;}
      72%  {opacity: 0.0;}
      80%  {opacity: 0.0;}
      88%  {opacity: 0.0;}
      96%  {opacity: 1.0;}
      100% {opacity: 1.0;}
    }

    @-moz-keyframes ani_rf12 /* Firefox */
    {
      0%   {opacity: 0.0;}
      8%   {opacity: 0.0;}
      16%  {opacity: 0.0;}
      24%  {opacity: 0.0;}
      32%  {opacity: 0.0;}
      40%  {opacity: 0.0;}
      48%  {opacity: 0.0;}
      56%  {opacity: 0.0;}
      64%  {opacity: 0.0;}
      72%  {opacity: 0.0;}
      80%  {opacity: 0.0;}
      88%  {opacity: 0.0;}
      96%  {opacity: 1.0;}
      100% {opacity: 1.0;}
    }

    @-webkit-keyframes ani_rf12 /* Safari und Chrome */
    {
      0%   {opacity: 0.0;}
      8%   {opacity: 0.0;}
      16%  {opacity: 0.0;}
      24%  {opacity: 0.0;}
      32%  {opacity: 0.0;}
      40%  {opacity: 0.0;}
      48%  {opacity: 0.0;}
      56%  {opacity: 0.0;}
      64%  {opacity: 0.0;}
      72%  {opacity: 0.0;}
      80%  {opacity: 0.0;}
      88%  {opacity: 0.0;}
      96%  {opacity: 1.0;}
      100% {opacity: 1.0;}
    }

    @-o-keyframes ani_rf12  /* Opera */
    {
      0%   {opacity: 0.0;}
      8%   {opacity: 0.0;}
      16%  {opacity: 0.0;}
      24%  {opacity: 0.0;}
      32%  {opacity: 0.0;}
      40%  {opacity: 0.0;}
      48%  {opacity: 0.0;}
      56%  {opacity: 0.0;}
      64%  {opacity: 0.0;}
      72%  {opacity: 0.0;}
      80%  {opacity: 0.0;}
      88%  {opacity: 0.0;}
      96%  {opacity: 1.0;}
      100% {opacity: 1.0;}
  }


/* Ende roter Faden */
/* ---------------- */


.artikel_buecher_wrapper {
        position:relative;
        width:800px;
}


.artikel_buecher_links {
        float:left;
        margin: 0 0 0 50px;
        width:200px;
}


.artikel_buecher_rechts {
        float:left;
        margin: 0 0 0 50px;
        width:400px;

}


.overmans_symbol {
        width:72px;
        height:29px;
     background-image:url(PIC/overmans_symbol.png);
     /* background-image:url(PIC/foto_schluessel.png);  sollte eigentlich so heissen, das Foto ist jetzt 17.9.2022 in beiden Dateien */
        margin: 30px 0 0 0;
}

.schluessel_symbol {
        width:72px;
        height:29px;
        background-image:url(PIC/foto_schluessel.png);
        margin: 30px 0 0 0;
}

#mainfooter {
        background-image:url(PIC/mainfooter_bg.png);
        background-repeat:no-repeat;
        position:relative;
        z-index:150;
        width:920px;
        height:43px;
        z-index:122;

}


#bg_bottom {
        margin:-180px auto 0 auto;
        width:950px;
        height: 250px;
        background-image:url(PIC/loseblaetter_bottom.png);
        background-repeat: no-repeat;
        z-index:100;
}


#footer {
        position:relative;
        z-index:2150;
        margin:-50px 55px 0 auto;
        padding: 0 0 30px 0;
        font-size:8px;
        font-weight:bolder;
        width:600px;
        text-align: right;
        font-family: Tahoma, Arial, Helvetica, sans-serif;
        text-transform:uppercase;
        letter-spacing: 0.1em;
        color:#fff;
}


a.footer:link {
        font-family: Tahoma, Arial, Helvetica, sans-serif;
        font-size:8px;
        text-decoration: none;
        color:#fff;
}


a.footer:hover {
        font-family: Tahoma, Arial, Helvetica, sans-serif;
        font-size:8px;
        text-decoration: none;
        color:#fff;
}

a.footer:visited {
        font-family: Tahoma, Arial, Helvetica, sans-serif;
        font-size:8px;
        text-decoration: none;
        color:#fff;
}

.zuletztgeaendert {
        font-family: Tahoma, Arial, Helvetica, sans-serif;
        font-size:14px;
        text-decoration: none;
        color:#fff;

}

.kleinerabsatz {
                margin: 8px 0 0 0px;
}


.clear {
        clear:both;
}



/* LIGHBOX START */

#lightbox{
        position: absolute;
        left: 0;
        width: 100%;
        z-index: 3210;
        text-align: center;
        line-height: 0;

}

#lightbox img{
        width: auto;
        height: auto;
}

#lightbox a img{
        border: none;
}

#outerImageContainer{
        position: relative;
        background-color: #fff;
        width: 250px;
        height: 250px;
        margin: 0 auto;
}


#imageContainer{
        padding: 10px;
}


#loading{
        position: absolute;
        top: 40%;
        left: 0%;
        height: 25%;
        width: 100%;
        text-align: center;
        line-height: 0;
}


#hoverNav{
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: 2200;
}

#imageContainer>#hoverNav{
        left: 0;
}


#hoverNav a{
        outline: none;
}


#imageDataContainer{
        font: 10px Tahoma, Verdana, Helvetica, sans-serif;
        background-color: #fff;
        margin: 0 auto;
        line-height: 1.4em;
        overflow: auto;
        width: 100%        ;
}


#imageData{
        padding:0 10px;
        color: #666;
}


#imageData #imageDetails{
        width: 70%;
        float: left;
        text-align: left;
}


#imageData #caption{
        font-weight: bold;
}


#imageData #numberDisplay{
        display: block;
        clear: left;
        padding-bottom: 1.0em;
}


#imageData #bottomNavClose{
        width: 100px;
        float: right;
        padding-bottom: 0.7em;
        outline: none;
}


#overlay{
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2200;
        width: 100%;
        height: 500px;
        background-color: #000;
}
/* LIGHTBOX ENDE */