/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 21.10.2015, 11:22:10
    Author     : koehler
*/





body {
  background-color:white; 
  font-size: 95%;
}

.bodyPict {  background-color:white; }

h1, h2 { font-family: Metrophobic, Arial, sans-serif; font-weight: 400; }
 h2 {  color:  #9D0D11;}
 h4{ font-size: 1.1em; padding:0px; margin:0px; font-weight: 300; }
p, a {font-family: Metrophobic, Arial, sans-serif; font-size: 1.2em;  line-height: 1.4em;}
li {margin-bottom:10px;}
a {color:#9D0D11; }
.italic { font-style: italic; font-weight: 300; font-size: 1.1em;}
li {font-family: Metrophobic, Arial, sans-serif; line-height: 1.5em; font-size: 1.1em;}
 .start {font-family: Metrophobic, Arial, sans-serif; line-height: 1.1em; font-size: 1.0em;}
.rechts { font-size: 30px;}

#appear  {
  animation:   LetterAppear 7s ease-in-out;
     -webkit-animation: LetterAppear 7s ease-in-out;
  -moz-animation:    LetterAppear 7s ease-in-out;
  -o-animation:     LetterAppear 7s ease-in-out;  
    
}
@keyframes LetterAppear {
  0% {  opacity:0;  }
  20% { opacity:0; }
  60% { opacity:0;  }
  80% {  opacity:0,5;  }
  100% {  opacity:1;  }
}

@-webkit-keyframes LetterAppear {
  0% {  opacity:0;  }
  20% { opacity:0; }
  60% { opacity:0;  }
  80% {  opacity:0,5;  }
  100% {  opacity:1;  }
}

#ball  {
    animation:  nudgeball 8s ease-in-out;
     -webkit-animation: nudgeball 8s ease-in-out;
  -moz-animation:    nudgeball 8s ease-in-out;
  -o-animation:      nudgeball 8s ease-in-out;
       z-index: 500;
    position: absolute;
     animation-iteration-count: 1;
     height: 20px;
    left:22px;
     top:38px;
}

@keyframes nudgeball {
  0% { transform: translate(200px, -48px); opacity:0; width:60px; height: 60px;  }
   30% { transform: translate(200px,-48px); opacity:1; width:60px; height: 60px; }
  80% { transform: translate(100px,-48px); opacity:1; width:40px; height: 40px; }
  100% { transform: translate(0px, 0px); opacity:1; width:20px; height: 20px; }
}

/* Chrome, Safari, Opera */ 
@-webkit-keyframes nudgeball {
    
  0% {-webkit-transform: translate(200px,-48px); opacity:0; width:60px; height: 60px; }
  25% { -webkit-transform: translate(200px,-48px); opacity:1; width:60px; height: 60px; }
  50% { -webkit-transform: translate(100px,-48px); opacity:1; width:40px; height: 40px; }
  75% {-webkit-transform: translate(50px,-48px); opacity:1; width:40px; height: 40px; }
  100% {-webkit-transform: translate(0px, 0px); opacity:1; width:20px; height: 20px; }
} 


.Punkt {
    color:#9D0D11;
    text-align: left;
    font-weight: bold;
    z-index: 500;
   animation:   LetterVanish 8s ease-in-out;
     -webkit-animation: LetterVanish 8s ease-in-out;
  -moz-animation:    LetterVanish 8s ease-in-out;
  -o-animation:     LetterVanish 8s ease-in-out;
    opacity: 0;
}

@keyframes LetterVanish {
  0% {  opacity:1;  }
  20% { opacity:1; }
  60% { opacity:0,5;  }
  80% {  opacity:0,2;  }
  100% {  opacity:0;  }
}
@-webkit-keyframes LetterVanish {
  0% {  opacity:1;  }
  20% { opacity:1; }
  60% { opacity:0,5;  }
  80% {  opacity:0,2;  }
  100% {  opacity:0;  }
}
#PunktContainer {
    margin-left: 110px;
   padding-top: 30px;
   width:200px;
   
    
}


.element {
  height: 40px;
  width: 40px;
  bottom:50px;
  left: 50px;
  background-color:  #9D0D11;
 position:relative;
  animation:  balls 5s linear 1;
    -webkit-animation: balls 5s linear 1;
  -moz-animation:   balls 5s linear 1;
  -o-animation:      balls 5s linear 1;
     z-index: 500;
   animation-delay: 2s;
    animation-iteration-count: 1;
  border-radius: 100%;
  border:1px solid black;
   -webkit-animation: balls 5s;
  -moz-animation:    balls 5s ;
  -o-animation:      balls 5s ;
  animation:         balls 5s ;
}


  #wrapper {
    
      background-color: #9BC4CF;
                margin:0;
              width: 100%; 
              border-left: 2px  solid    #9D0D11; 
               border-right: 2px  solid    #9D0D11; 
 border-top: 20px  solid    #9D0D11; 
   border-radius:50px;}
  .Trenn1{
      color: #B70802;
     height: 10px;
	border: 0;
	box-shadow: 0 10px 10px -10px 
  }
 #small  {
       
     color:white; 
       letter-spacing: 4px;
       background-color: black; 
        border-top-right-radius:20px;
       position: relative;
      padding:10px 0px 0px 0px;
       line-height: 100%;
    }
    
      
  #umfang { 
   float:right; }
     #umfang2 {
  position: absolute;
  top:50px;
      right:0px; }
.menu {
display:block;
text-align:left;
right: 0px;
 position: absolute;
z-index:400;
 
}
.KleinCont {
   max-width: 500px; 
  margin: auto;
}

.Bildlauf {
    position:relative;
    margin:auto;
    max-width: 400px;
    text-align:center;
}

.Bilder {
    position:relative;
    margin:auto;
    width: 250px;
    height:250px;
}
.animationButtonGo{
         margin-top: 20px;
         margin-bottom: 10px;
         margin: auto;
          width: 60px;
    height: 55px;
        background-image: url(images/Go.png);
    }

.animationButtonGo:hover, .animationButtonGo:focus{
    background-image: url(images/Go_W.png);
}

.animationButtonStop{
         margin-top: 20px;
         margin-bottom: 10px;
         margin: auto;
          width: 60px;
    height: 55px;
        background-image: url(images/stop.png);
    }

.animationButtonStop:hover, .animationButtonStop:focus{
    background-image: url(images/stop_W.png);
}

.animationButtonGoDiv{
         margin-top: 20px;
         margin-bottom: 10px;
         margin: auto;
          width: 60px;
    height: 50px;
        background-image: url(images/Go.png);
    }

.animationButtonGoDiv:hover, .animationButtonGoDiv:focus{
    background-image: url(images/Go_W.png);
}

.animationButtonStopDiv{
         margin-top: 20px;
         margin-bottom: 10px;
         margin: auto;
          width: 60px;
    height: 50px;
        background-image: url(images/stop.png);
    }

.animationButtonStopDiv:hover, .animationButtonStopDiv:focus{
    background-image: url(images/stop_W.png);
}

.menu ul {
list-style: none;
margin: 0;
padding: 0;
 
}

.menu h2 {
color: white;
 text-transform: uppercase;
font-style: oblique;

}

.menu  a {
font-size:  1.2em ;
   color: white;
    font-weight: bold; 
  padding-left: 15px ;
  padding-right: 15px ;
 text-decoration: none;
margin: 0px;

border: 0px solid black;
}

 .menu a:hover  {
color: #9BC4CF;
 font-weight: bolder; 
 text-decoration: none;
border-left: 1px solid white;
 
}
 .menu li, .menu a  {
     display: block;
width: auto;
  line-height: 120%;
   
}

 .hover { color: #9BC4CF;}

.menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
width: 100%;
}

div.menu  ul ul,
div.menu ul  li:hover  ul ul
{display: none;}

div.menu  ul li:hover ul,
div.menu  ul ul li:hover ul
{display: block;
 background-color:  black;
 border-top-left-radius:30px;
 border-bottom-left-radius:30px;
}

#logo {
    width:80px;
    height: 80px;
    top:0px;
    left:5px;
   position:absolute;
   
}
#portrait {
   width:100px; 
   margin:auto;
    
}

.container1{
    position: relative;
    margin: 0px;
    border: 0px solid blue;
}
.container2{
    position: relative;
    margin: 0px;
    border: 0px solid red;
    
}
/* 
 Shadow code usw
http://www.css3generator.in/box-shadow.html
*/
.contLinks {  
      margin:auto;
      max-width: 450px;
  padding:8px;
   padding-left:20px;
   background-color: white;
 border-top-left-radius:50px;
    border-bottom-right-radius:50px;
   min-height: 150px;
 border: 2px solid #A9B0B6;
}

.contLinksKlein {  
      margin:auto;
      max-width: 400px;
      text-align: center;
      vertical-align: middle;
  padding:10px;
   padding-left:20px;
   background-color: white;
 border-top-left-radius:50px;
    border-bottom-right-radius:50px;
   min-height: 60px;
 border: 2px solid #A9B0B6;
}

.contRechts, .contRechtsGross {
   margin:auto;
   background-color: white;  
   padding:20px;
    margin-top: 30px;
    border-top-right-radius:50px;
    border-bottom-left-radius:50px;
    border: 2px solid #A9B0B6;
}

ul.firstList {
      list-style-image: url(images/ball2.png);
       margin-bottom: 1.0em;
       max-width: 350px;
       margin:auto;
     }
     
     .firstList li {
     margin-top: 0.5em;
     }
     
       .secondList li {
     margin-top: 0.2em;
     }
.contRechts ul ul, .contRechtsGross ul li  ul {
   list-style-type: square;
   padding-left: 30px;
   
   
}

ul.secondList {
    list-style-image: url(images/sp3.png);
  
    font-size: 0.9em;
}
#contLogo {
  margin: 0px;
  width: auto;
 background-color: white;
   height: 120px;
    text-align: right;
  vertical-align: bottom;
  border-bottom: 4px  solid     #9D0D11;
 
  }


.btn {
   padding: 13px 26px;
       border-bottom: 1px solid white;
   color: white;
   background-color: transparent;
      }
.btn:hover {
    border: 0px solid #ffffff;
     border-bottom: 1px solid white;
   }
.btn:active {
   top: 1px;
   position: relative;
   }
   
   .rechts{
      
     top:70px;
    right:10px;
   position:absolute;
 color: rgb(143, 137, 137);
font-size: 25px;
  z-index: 300;

}

.SpaceSmall {
    display:block;
}

.hrSmall {
    width:80%;
    color: grey;
    border: none;
border-top: 1px solid #9D0D11;
background-color: #FFFFFF;
height: 1px;
}

.Foot {
   width:auto;
   min-height:50px;
  padding: 2px 2px 0px5px;
   background-color: white;
 border-bottom: 30px  solid     #9D0D11;
 border-top: 3px  solid     #9D0D11;
 position: relative;
   } 
.Foot p {
     text-align: left;
     margin-left: 20px;
     margin-right: 20px;
     font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif;
     font-size: 14px;
color: black; 

       }
       .Haupt-Container {
           margin:auto;
       }  
       .mail {
           white-space:nowrap ;
          font-weight: bold;
       }
       
     .WebPic {
           width:150px;
           
       }
.Text {
     color:  #9D0D11; 
     font-weight: bold;
      font-size: 16px;
       }
#LogoFoot {
  position: absolute;
 width:50px; 
 right:0px;
 top:0px;
 
} 

.footLink {
     color: grey;
    margin:auto  !important;
    text-decoration: none;
    font-size: 1.1em;
     position: absolute;
   bottom: -25px  !important;
        right:140px !important;
}
.footLinkR {
     color: grey;
    margin:auto  !important;
    text-decoration: none;
    font-size: 1.1em;
     position: absolute;
   bottom: -25px  !important;
        right:10px;
}

.footLinkR:hover, .footLink:hover {
   color: white;
   }


.start div {
       margin-top: 0px;
      line-height: 150%;
      height: 5px;
       overflow: hidden;
}

.start:hover div {
    height: 100px;
     line-height: 150%;
     -webkit-transition: height 2s ease-in-out;
    -moz-transition: height 2s ease-in-out;
    -ms-transition: height 2s ease-in-out;
    -o-transition: height 2s ease-in-out;
     transition: height 2s ease-in-out;      
     
}




.PfeilBlau {
    display: inline;
vertical-align: middle;
    width:20px;
     padding:5px;
}

#home {
   position: relative;
    width:100%;
}
.Symb {
    height:20px;
    padding:5px;
display: inline;
vertical-align: middle;}

#TelefonSmall {
    display:block;
}
#TelefonBig {
    display:none;
}

span.tooltip  {
   color:  #9D0D11;
    font-size: 1.3em;     
}
span.tooltip { position: relative; text-decoration: none; } 
 span.tooltip:after { content: attr(data-tooltip); 
         font-size: 0.8em;          
         position: absolute; bottom: 130%; left: 20%;
         background: #9D0D11; padding: 5px 15px; color: white; 
         width:180px;
         -webkit-border-radius: 10px; -moz-border-radius : 10px; 
         border-radius : 10px;  opacity: 0; 
         -webkit-transition: all 1.0s ease; -moz-transition : all 1.0s ease; transition : all 1.0s ease; } 
 span.tooltip:before { content: ""; position: absolute; width: 0; 
          height: 0; border-top: 20px solid #9D0D11; 
          border-left: 20px solid transparent; border-right: 20px solid transparent; 
          -webkit-transition: all 1.0s ease; -moz-transition : all 1.0s ease; transition : all 1.0s ease; opacity: 0; 
          left: 30%; bottom: 90%; } span.tooltip:hover:after { bottom: 100%; } 
 span.tooltip:hover:before { bottom: 70%; } span.tooltip:hover:after, span:hover:before { opacity: 1; }  

 .SidePicture {
     width: 200px;
     margin:auto;
     
 }
 
 #photos img {
  position: absolute;
   width: 250px;
height: 250px;
   overflow: hidden;
  display: block;   
}
 #photos {
  margin-top: 10px;
 margin-bottom:5px;
    width: 260px;
  height: 250px;
  overflow: hidden;
  display: block;
  //280 x 150  background-image:  url(../images/GGForm10.png);
   //background-repeat: repeat;
}

#ServiceTexte {
    margin-top:10px;
    margin-left:0px;
    font-style: italic;
   font-weight: 300;
   font-size: 1.1em; 
   text-align: left;
    
}

  .error {
           font-size:0.7em;
           display:none;
          
      }
@media screen and (min-width: 550px)
{
    
.bodyPict {  background-color:white; background-image: url(images/Hint9.png); }
.bodyPict2 {  background-color:white; background-image: url(images/Hint9.png); }
.bodyPict3 {  background-color:white; background-image: url(images/Hint9.png);  }
.bodyPict4 {  background-color:white; background-image: url(images/Hint9.png);  }
.bodyPict5 {  background-color:white; background-image: url(images/Hint9.png);  }
 #wrapper {  margin:auto !important;  width: 80% !important; }
  .rechts{
    font-size: 25px  !important;
  z-index: 300;
 top:60px;
    right:10px;
   position:absolute;
   text-shadow: rgb(71, 71, 71) 0px 1px 0px;
}
#ball  {
     left:24px  !important;
     top:53px  !important;
}
#logo {
    width:100px;
    height: 100px;
    top:5px;
    left:5px;
   position:absolute;
}

#PunktContainer {margin-left: 285px !important;}
}

@media screen and (min-width: 850px)
{  
    div.menu { margin:0px; position:relative; display:block;} 
   .menu ul  {display: block;  position: relative;  margin:0px; } 
    .menu li {float:left; padding:2px;  margin:0px; } 
  .menu a  { margin:0px; padding: 2px 20px 2px 20px  !important;} 
  .menu li, .menu a  {width:auto !important;}
   .menu a, .menu li:hover    {border: 0px solid white  !important;}
#small{display:none;}
 div.menu ul ul li {border: 0px solid grey;  }
 #wrapper {  margin:auto !important;  width: 90% !important; }
div.menu  ul li ul
{display: block;
}
  #umfang2 {
  position: relative  !important;
    top:0px  !important;
      right:0px;
  }
 .container1{ margin: 0px 0px 0px 0px !important; min-height: 40px; vertical-align: middle; }
.container2{ margin: 0px 0px 0px 0px !important;}
.contLinks {
    margin-left:20px;
    width: 230px ;
    min-height: 150px;
    vertical-align: middle;
    display:block;
  float:left;
}
.animationButton{
    margin: 10px 40px;}
.contLinksKlein {
    margin-left:20px;
    width: 130px ;
    min-height: 100px;
    vertical-align: middle;
    display:block;
  float:left;
}

.contRechts {
 
  margin-left: 300px;
  display:block;
    margin-right:20px;
    padding-left:40px !important;
    border: 4px  !important;
}

.contRechtsGross {
  width:auto ;
  margin-left: 200px;
  display:block;
    margin-right:20px;
    padding-left:100px !important;
}

/* 
   Eintscheidung für Menue-Ausrichtung rechts oder links
http://www.css3generator.in/box-shadow.html
*/
.RightNavBig {
   float:right;   
    background-color: black;
     border-top-right-radius:30px;
     border-bottom: 1px solid black;
}
#TelefonSmall {
    display:none;
}
#TelefonBig {
    display:block;
}
.Foot {    background-color: white;   height:50px; }

 .rechts {  font-size: 40px  !important; margin-top:-20px !important; vertical-align: middle  !important;  }
#PunktContainer {    margin-left: 300px   !important;}
}


   
   @media screen and (min-width: 1000px)
{  #wrapper {  margin:auto !important;  width: 80% !important;  max-width: 1200px !important;}
   .rechts {  font-size: 50px  !important;  
              margin-right: auto  !important;
              vertical-align: middle  !important; 
 color: rgb(143, 137, 137);
background-color: rgb(255, 255, 255);
text-shadow: rgb(71, 71, 71) 1px 3px 2px;}
   #PunktContainer {    margin-left: 300px   !important;}
}