@charset "utf-8";

body{
  font: 16px/1.5 Verdana, Arial, Helvetica,sans-serif;
  padding:0;
  margin:0;
  background-color:#f4f4f4;
}

/* Global */
.container{
  width:90%;
  margin:auto;
  overflow:hidden;
}

ul{
  margin:0;
  padding:0;
}

.button_1{
  height:38px;
  background:#e8491d;
  border:0;
  padding-left: 20px;
  padding-right:20px;
  color:#ffffff;
}

.dark{
  padding:15px;
  background:#35424a;
  color:#ffffff;
  margin-top:10px;
  margin-bottom:10px;
}

.animateBoxROuter {
width: 300px;
position: absolute; top: 200px;
left:50%; margin-left:-150px;
z-index: 5000;
}

.animateBoxR {
width: 300px;
position: relative; right: -3000px;
font-size: 85%;
padding: 24px 12px 24px 12px;
background: #fff;
border: 2px solid #006600;
border-radius: 14px;
}

.elastic-video {
  position: relative;
  padding-bottom: 55%;
  padding-top: 15px;
  height: 0;
  overflow: hidden;
}

.elastic-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.pic{
  transition-duration:1s;
}

.pic:hover{
  -webkit-transform:scale(2);
  transition-duration:1s;
  z-index:99999;
  position:flex;
}

.picr{
  transition-duration:1s;
}

.picr:hover{
  -webkit-transform:scale(2);
  transition-duration:1s;
  transform-origin: 80% 0%;
}

.picl{
  transition-duration:1s;
}

.picl:hover{
  -webkit-transform:scale(2);
  transition-duration:1s;
  transform-origin: 0% 80%;
}

/* Header **/
header{
  position:fixed;
  width:100%;
  background:#35424a;
  color:#ffffff;
  padding-top:10px;
  height:70px;
  border-bottom:#e8491d 3px solid;
}

header a{
  color:#ffffff;
  text-decoration:none;
  text-transform: uppercase;
  font-size:20px;
}

header li{
  float:left;
  display:inline;
  padding: 0 15px 0 15px;
}

header #branding{
  float:left;
  font-size:20px;
  font-weight:bold;
}

header nav{
  float:right;
  margin-top:10px;
}

header .current a{
  color:#e8491d;
  font-weight:bold;
}

header a:hover{
  color:#ffff00;
}

/* Titelfoto */
#titelfoto{
  padding-top:80px;
}

/* Laufschrift */
#laufschrift{
  padding:15px;
  color:#ffffff;
  background:#35424a
}

#laufschrift h1{
  float:left;
}

/* Sidebar */
#sidebar{
  float:right;
  width:26%;
  margin-top:0px;
  text-align:center;
}

/* Main */
article#main-col{
  float:left;
  width:70%;
}

#main a{
  color:#00008b;
  text-decoration:none;
}

#main .current a{
  color:#ffff00;
  font-weight:bold;
}

#main a:hover{
  color:#0000ff;
  text-decoration:none;
}

#main h1{
  font-size:30px;
}

/* Sidebar */
#sidebar li{
  list-style: none;
  padding:10px;
  border: #cccccc solid 1px;
  margin-bottom:5px;
  background:#808080;
}

#sidebar h1{
  font-size:20px;
}

#sidebar a{
  color:#ffffff;
  text-decoration:none;
  text-transform: uppercase;
  font-size:20px;
}

#sidebar .current {
  color:#ffff00;
  font-weight:bold;
}

#sidebar a:hover{
  color:#ff0000;
}

/* Footer */
footer{
  background:#35424a;
  color:#ffffff;
  text-align: center;
  padding-top:10px;
  min-height:70px;
}

footer a{
  color:#ffffff;
  text-decoration:none;
  font-size:16px;
}

footer li{
  display:inline;
  padding: 10px 10px 10px 10px;
}

footer a:hover{
  color:#cccccc;
}

#bottom {
    width: 100%;
    position:fixed;
    bottom: 0px;
    height: 25px;
    background-color: #FFFF00;
    padding:2px 0px 4px 0px;
    text-align:center;
}

#slide-out {
    z-index:20000;
    position: fixed;
    top: 32%;
    left: 0;
    width: 50px;
    padding: 8px 8px;
    text-align: center;
    background: #999;
    transition-duration: 0.3s;
    border-radius: 0 5px 5px 0;
}
#slide-out_inner {
    font-size: .9em;
    padding:15px;
    text-align: left;
    position: fixed;
    top: 32%;
    left: -330px;
    background: #EDEDED;
    width: 300px;
    border-width:1px 1px 1px 0;
    border-style:solid;
    border-color:#999;
    border-radius: 0 0 10px 0;
    transition-duration: 0.3s;
    border-radius: 0 10px 10px 0;
}
#slide-out:hover {
    left: 265px;
}
#slide-out:hover #slide-out_inner {
    left: 0;
}

/********************* ANZEIGE beim Laden DESKTOP-Ansicht *********************/
        /** definiert das Fenster **/
#anzeige {
  background-image: url();                /** Hintergrundbild **/
  background-size: cover;                                /** Hintergrundbild Responsive Darstellung **/
  position:fixed;                                                /** Fixiert (scrollt nicht mit) Alternative "position:absolute;" **/
  width:800px;                                                /** Breite des Fensters **/
  left:100px;                                                        /** Position von Links **/
  top:50px;                                                /** Position von Oben **/
  padding:0px;                                        /** Textabstand zum Fensterrand **/
  color:#006600;                                        /** Textfarbe **/
  font-size: 16px;                                        /** Schriftgröße **/
  border-radius:10px;                                        /** Runde Ecken **/
  border-width:2px;                                        /** Rahmenbreite **/
  border-style:solid;                                        /** Positionstil **/
  border-color:#006600;                                /** Rahmenfarbe **/
  z-index:20000;                                         /** Überlagerung **/
}

        /** Überschrift H2 innerhalb des Popups **/
#anzeige h2 {
  color:#006600;                                        /** Schriftfarbe**/
  font-size:22px;                                                /** Schriftgröße **/
  font-weight:bold;                                        /** Schrift Fett **/
}
        /** definiert den Hintergrund der Texte **/
.hintergrund {
  background: rgba(255, 255, 255, 0.8);         /** Hintergrund Weiss, 80% Durchscheinend**/
  padding:12px;                                                /** Textabstand zum Rand**/
  border-radius:5px;                                        /** Runde Ecken **/
  border-width:1px;                                        /** Rahmenstärke**/
  border-style:solid;                                        /**Rahmenstil **/
  border-color:#006600;                                /** Rahmenfarbe **/
  font-weight:bold;                                        /** Schrift Fett **/
  margin:20px;                                                /** Abstand zum Fensterrand **/
}
        /** Definiert den Schließen.Button **/
#end{
  position:absolute;                                        /** Fixiert (scrollt nicht mit) **/
  background:#006600;                                /** Hintergrundfarbe **/
  color:#fff;                                                /** Farbe des Kreuzes **/
  right:-15px;                                                /** Position**/
  top:-15px;                                                /** Position**/
  border-radius:50%;                                        /** Rund**/
  width:30px;                                                /** Größe**/
  height:30px;                                                /** Größe**/
  line-height:30px;                                        /** Größe**/
  text-align:center;                                        /** Zentriert**/
  font-size:15px;                                                /** Größe**/
  font-weight:bold;                                        /** Fett**/
  font-family:'Arial Black', Arial, sans-serif;        /** Schriftart**/
  cursor:pointer;                                                /** Klickbar**/
}
        /** Definiert die Link-Button **/
.button-anzeige {
  width:50px;                                                /** Breite**/
  border-radius: 10px;                                /** Runde Ecken**/
  color: #ffffff;                                                /** Schriftfarbe**/
  font-size: 16px;                                        /** Schriftgröße**/
  background: #006600;                                /** Hintergrundfarbe**/
  padding: 3px 6px 3px 6px;                        /** Abstand zum Rand**/
  text-decoration: none;                                /** Nicht unterstreichen**/
  text-align:center;                                        /** Zentriert**/
}
        /** Definiert die Link-Button Hover **/
.button-anzeige:hover {
  background: #009900;                                /** Hintergrundfarbe**/
  color: #ffffff;                                                /** Schriftfarbe**/
  text-decoration: none;                                /** Nicht unterstreichen**/
}
        /** Definiert wann und wie das Fenster eingeblendet wird **/
.einblenden {
animation-name: einblenden;
animation-duration: 1s;                                /** Gesammte Zeit der Animation **/
animation-iteration-count: 1;                        /** Anzahl der Wiederholungen **/
animation-timing-function: ease-in-out;
}
@keyframes einblenden {
from {transform:translate(0, -500px);}                /** Startposition **/
50% {transform:translate(0, -500px);}                /** Position nach 50% der Zeit (0.5 Sec) **/
85% {transform:translate(0, 50px);}                /** Position nach 80% der Zeit (0.8 Sec) **/
to {transform: translate(0, -0px);}                 /** Endposition **/
}
        /** Definiert wann Fenster ausgeblendet wird (Bildschirmbreite) **/
@media (max-width: 979px) {
#anzeige {
display:none;
}}

        /** html slide show **/
.slider-holder
        {
            width: 600px;
            height: 400px;
            background-color: yellow;
            margin-left: auto;
            margin-right: auto;
            margin-top: 0px;
            text-align: center;
            bottom: -30px;
            overflow: hidden;
        }

        .image-holder
        {
            width: 4200px;
            background-color: red;
            height: 400px;
            clear: both;
            position: relative;

            -webkit-transition: left 2s;
            -moz-transition: left 2s;
            -o-transition: left 2s;
            transition: left 2s;
        }

        .slider-image
        {
            float: left;
            margin: 0px;
            padding: 0px;
            position: relative;
        }

        #slider-image-1:target ~ .image-holder
        {
            left: 0px;
        }

        #slider-image-2:target ~ .image-holder
        {
            left: -600px;
        }

        #slider-image-3:target ~ .image-holder
        {
            left: -1200px;
        }

        #slider-image-4:target ~ .image-holder
        {
            left: -1800px;
        }

        #slider-image-5:target ~ .image-holder
        {
            left: -2400px;
        }

        #slider-image-6:target ~ .image-holder
        {
            left: -3000px;
        }

        #slider-image-7:target ~ .image-holder
        {
            left: -3600px;
        }

        .button-holder
        {
            position: relative;
            top: -20px;
        }

        .slider-change
        {
            display: inline-block;
            height: 20px;
            width: 20px;
            border-radius: 5px;
            background-color: yellow;
        }
        /** end html slide show **/

/* Media Queries */
@media(max-width: 800px){
  header #branding,
  header nav,
  header nav li,
  article#main-col,
  aside#sidebar{
    float:none;
    text-align:center;
    width:100%;
  }

  article#main-col{
  text-align:justify;
  }

  header{
  padding-bottom:20px;
  height:50px;
  line-height:30px;
  }

  .slider-holder{
  display: none;
  }

  header #branding address{
  display: none;
  }

  header a{
  font-size: 16px;
  }

  header li{
  padding: 0 10px 0 10px;
  }

  header nav{
  margin-top:1px;
  }

  h1{
  text-align:left;
  font-size:22px;
  }

  h2{
  text-align:left;
  font-size:20px;
  }

}