* {
    margin: 0;
    padding: 0;
}
 
p {
  background-image: url(sftp://acc892397439@home117539918.1and1-data.host/befeldung);
}
 body   { 
	background-color: skyBlue; 
	color: midnightblue;
}
 body {
	background-color: DeepSkyBlue;
	background-image: url("https://../Befeldungsbilder/herzwolken gif.jpg");
	background-repeat: no-repeat;
	background-position: 90% top;
	color: midnightblue;
	height: 100vh;
}
/* Navi oben */

#ul-nav  {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

/* Change the link color on hover */
li a:hover {
  background-color: #555;
  color: white;
}





  .image-container {
    display: inline-block; /*  Damit das Bild nicht die volle Breite einnimmt */
    overflow: hidden; /* Verhindert, dass überlaufende Teile des Bildes sichtbar sind, wenn es vergrößert wird */
  }
  .image-container img {
    transition: transform 0.3s ease; /* Übergangseffekt */
    transform-origin: top left; /* Ursprung des Zoomeffekts */
  }

  .image-container:hover img {
    transform: scale(1.2); /* Bild wird um 20% vergrößert */

  }

   /* Optional:  Style the banner */
#img-banner {
            display: block; /* Prevent extra space below the image */
            width: 1200px; /* Set banner width */
            height: 100px; /* Set banner height */
            
        }



header, nav, footer, aside, section {                       
    display: block;
}
html, body {
    height: 100%;
} 



}
html,body{margin:0}.hidden{display:none}.n{padding:5px}#cc-website-title a {text-decoration: none}.cc-m-image-align-1{text-align:left}.cc-m-image-align-2{text-align:right}.cc-m-image-align-3{text-align:center}</style> 
#wrapper {
   background-image:url(../webseitenbilder/himmel.jpg);
   background-color: yellow;
    width: 998px;
    border: 0px solid transparent;
    margin: 0 auto;
    text-align: left;
}    
    
} 

.withbg {
	background-size:cover;
	background-position: right center;
}
@media (max-width: 719px) {
	.withbg {
		width: 98%;
		background-image: url (img src="../../Befeldungsbilder/himmel.jpg" );
      border:4px solid blue;
		height: 300px;
	}


@media (min-width: 720px) {
	.withbg {
		max-width: 980px;
		background-image: url(seashell-l.jpg);
		border:4px solid beige;
		height: 460px;
	}







#logotext  {
   background-image: url(img src="../wolken.jpg" />);
   float: none;
   position: static;
   width: 20px;
   height: 20px;
   text-align: right;
}

#p-id {
text-align: center;
position: static;
color: #004343;
border-style: hidden; 
}


img {
    border: 1px solid red;
    }
img[alt] {
    border: 1px solid green;
}
img[alt=""] {
    border: 1px solid #FF8400;
}
a[href^="http://"]  {
        color: #000080;
        background: url(http://www.hufheilpraktik-groening.de/Webseitenbilder/externelinkzeichen.png) no-repeat;
        padding-left: 30px;
    
}


#impreseumbild {
    background-image: url(impressum/Impressumbild.png);
    position: absolute;
    margin-left: 20px;
    margin-top: 50px;
    background-attachment:  fixed;
/*    box-shadow: -10px -10px -10px green ,
                -10px -10px -10px red ,
                -10px -10px -10px blue ,
                -10px -10px -10px yellow ;  */
}
      
#header    {
       background-image: <img src="../../wolken.jpg" width="346" height="444" style="border: 0px;" />
       height: 100px;
       background-attachment: scroll;
       background-position: bottom;
       background-attachment: scroll;
}
header a {
    color: transparent;
   background-color: transparent;
}

 header p {
    text-align: right;
    font-style: oblique;
    padding: 75px;
    margin: 0px;
    margin-left: 10px;
    color: #004900;

}
h1 {
    font-family: 'Great Vibes', cursive;
}
#menu {
	width: 800px;
	margin: 4px auto;
    position: relative;
padding-right: 350px; /* Button von rechts nach links schieben */
	padding-bottom: 1em;
}

#menu h3 {
	font-size: 16px;
	color: #FFFFFF;
	padding: 1px;
	margin: 0;
	background: #000;
	line-height: 20px;
}

#menu ul {
	position: absolute ;
	margin: 0 1px;
	list-style: none;
}

#menu ul li {
	float: left;
	margin: 0 0 0 20px; /*letzte Zahl ist der Abstand von Button*/
	font-size: 20px;
	font-family: 'Bree Serif', serif;
	line-height: 50px;
}

#menu ul li a {
	color: darkgreen;
	text-decoration: none;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
	 -ie-transition: all .5s ease-in-out;
}

#menu ul li a:hover {
	color:#008000 /*Schrift im Hoverbereich */
}

#menu ul li img {
	float: left none; /* Schrift Button runtersetzen*/
	border-style: #728865;  /*Aussenborderkreis wegmachen  */
	width: 70px;  /* Buttonbilder breite*/
	height:60px;
	margin: 0px 0px;
	padding: 0px;
	background:  #728865; /* Innenkreis färben */

	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	 -ie-border-radius: 30px;
	border-radius: 30px;

	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all 5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	 -ie-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}

#menu ul li:hover img {
	background-image: url(JundJ_200x133.png) ;
    background: #800000;

}

#menu ul ul {
	position: absolute;
	top: -9999px;
	background: #fff;
	padding: 10px;  /*Breite des Feldes*/
	margin: 0 0 0 -6px;
	-webkit-box-shadow: 0 10px 20px #888;
	-moz-box-shadow: 0 10px 20px #888;
	-ie-box-shadow:  0 10px 20px #888;
	box-shadow: 0 10px 20px #888;
}

#menu ul ul:before {
	position: absolute;
	content:"";
	width: 10px;
	height: 10px;
	top: 0px;
	left: 0px;
	background: #000;
	-webkit-transform: rotate(60deg);
	-moz-transform: rotate(60deg);
	-o-transform: rotate(60deg);
	-ms-transform: rotate(60deg);
    -ie-transition: rotate(60deg);
	transform: rotate(60deg);

}

#menu ul li:hover ul {
	top: 35px;   /*wie das Menue runter oder hoch gestellt wird  */
}

#menu ul ul li {
	float: none;
	font-size: 20px; /* Schrift für Ausklappmenu */
	font-style: italic;
	color: #006600;
	padding: 5px 10px;
	text-align: left;
	text-transform: uppercase;
	margin: 0px;
	border-bottom: 1px solid #ddd;
	line-height: 20px; /* höhe der geöffneten Buttons */
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	-ie-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}

#menu ul ul a {
	color: #006600;
	font-family: cursive sans-serif;
	font-style: italic;
	font-size: large;
	text-decoration: none;
}

#menu ul ul li.all {
	font-size: 14px;
	border-bottom: none;
	text-transform: none;
}

#menu ul ul li:hover {
	background: transparent;
	color: #fff;
}
ul#menu .sub1 a {
    margin-top: 10px;
}
ul#menu .sub1 li {
      border:1px solid green;

}

ul#menu ul.sub1 {
    display: none;
    position: absolute;
    top: 0px;
    left:126px;
}
ul#menu li:hover .sub1 {
   display: block;

}


#erfahrungsberichte       {
    color: #004343;
    font-family: cursive;
    font-style: italic;
    font-size: 1.5em;
}




#unten {
    padding-top: Auto;
    text-align: center;
    font-size: 0.3em;
}
#nachoben {
     margin: 3px;
    width: 167px;
    text-align: center;
    color: #005F5F;  
}

#aufzaehlung {
     margin: 3px;
    width: 167px;
    text-align: center;
    color: #005F5F;
}


p {
 color: #005500;
 font-style: normal;
 font-size: 0.8em;
 font-family: Arial sans-serif fantasy;

 }




#wizzard {
    text-align: left;
    color: #FFFFFF;
    line-height: 20px;
    font-size: 0.9em;
    font-style: italic;
}
#arbeitsweise {
    color: #6A5250;
    text-align: left;
    font-style: italic;
    font-size: 1.5em;
}
#kontaktimpressum {
                margin-left: 1px;
                color: #800000;
}
#ueberschrift 
{
    font-family: sans-serif, Arial, fantasy;
    font-style: italic;
    color: green;
    font-size: 60px;
    padding-top: 30px;
    margin-left: 1px;
    padding-bottom: 2px; /* Abstand von der überschrift zum Text*/
}
#pschrift {
    font-family: sans-serif, Arial, fantasy;
    font-style: italic;
    color: #445166;
    font-size: 40px;
  
    margin-left: 1px; 
} 
#only 
{
    color: #005F5F;
    font-style: italic;
    font-family:, cursive, Arial, sans-serif;
    font-size: 25px;
    text-align: center;
    padding-top: 0px;
}
#Thermogrphie 
{
    font-family: sans-serif, Arial, fantasy;
    font-style: italic;
    color: #445166;
    font-size: 30px;
    padding-top: 20px;
    margin-left: 1px;
}	

#dienstleistung {
    color: #800000;
    padding-top: 0px;
    margin-left: 1px;
    padding-bottom: 0.4em;
}
#uerbeschrift {
    font-family: Arial sans-serif cursive;
    font-style: italic;
    font-weight: bold;
    font-size:  60px;
    color: #800000;
    padding-top: 20px;
    margin-left: 1px;
    padding-bottom: 0.4em;
}
#problemehelfen {
    color: #445166;
    font-style: italic;
    font-size: 1em;
}
#vorsicht  {
    color: red;
    font-style: italic;
    font-size: 1em;
    text-decoration: underline;
}
#gesundehufe{
    color: #316389;
    font-family: sans-serif, Arial, fantasy;
    font-style: italic;
}
#auskuenfte {
    font-family: sans-serif, Arial, fantasy;
     font-style: italic;
     text-align:left;
    color: green;
    font-size: 1.3em;
}
#konsequente {
    color: #008000;
    font-family: Arial, sans-serif;
    font-size: 0.5em;
}
#zubenennen {
    margin: 0.8em;
    padding: 1em;
    color: #008000;
}
#evolution {
    color: black;
    font-size: 1.3em;
}
#textuebermich {
 text-align: left;
 font-size: 1.5em;
    font-family: Arial, sans-serif;
    font-style: normal;
    color: #2C593B
}

#steuerungoben a:hover {
   color: green;
   text-decoration: underline;
   margin-left: 20px;
  background-image: url(Webseitenbilder/kleinehufe50x50.png);
}
#steuerungoben {
    height: 50px;
margin-top: 1px;
background-attachment: fixed; 
  zoom:1;
}
#steuerungoben a:hover {
   color: green;
   text-decoration: underline;
   margin-left: 20px;
  background-image: url(Webseitenbilder/kleinehufe50x50.png);
}
#steuerungoben {
    height: 50px;
margin-top: 1px
background-attachment: fixed; 
  zoom:1;
}
#steuerungoben ul {
    list-style-type: none ;
}
#steuerungoben li {
    display: inline;
    font-size: 0.9em;
   padding-bottom: 6px;
}
#steuerungoben a {
   line-height: 58px;
    width: 150px;
   /* color: #000000; */
    text-decoration: none;
    display: block;
    text-align: center;
    float: left;
    border-right: 1px solid transparent;

-webkit-transition:  background-color 2s 0s ease ,
                     margin-left      1s 2s ease ,
                     color            3s 3s ease ;
-moz-transition:     background-color 2s 0s ease ,
                     margin-left      1s 2s ease ,
                     color            3s 3s ease ;
 -o-transition:      background-color 2s 0s ease ,
                     margin-left      1s 2s ease ,
                     color            3s 3s ease ;
  -ms-transition:    background-color 2s 0s ease ,
                     margin-left      1s 2s ease ,
                     color            3s 3s ease ;            
     transition:     background-color 2s 0s ease ,
                     margin-left      1s 2s ease ,
                     color            3s 3s ease ;

}
/*
#horsesteuerunglinks  {
    position:  absolute;
    /* background-color: red; 
     margin-left: 50px;
     margin-top: 60px;
     left: 200px  
     -webkit-tranform:rotate(15deg);
      -moz-tranform:rotate(15deg);
      -ms-tranform:rotate(15deg);
      -o-tranform:rotate(15deg);
      tranform:rotate(15deg);
    
}

#steuerunglinks a:hover {
   color: green;
   text-decoration: underline;
   margin-left: 20px;
   background-image: url(Webseitenbilder/kleinehufe50x50.png);
}
#steuerunglinks a {
      color: #000000;
      text-decoration: none;
      padding: 0 10px;
 -webkit-transition: background-color 2s 0s ease ,
                     margin-left      1s 2s ease ,
                     color            3s 3s ease ;          
  -moz-transition:   background-color 2s 0s ease ,
                     margin-left      1s 2s ease ,
                     color            3s 3s ease ;
 -o-transition:      background-color 2s 0s ease ,
                     margin-left      1s 2s ease ,
                     color            3s 3s ease ;
   -ms-transition:   background-color 2s 0s ease ,
                     margin-left      1s 2s ease ,
                     color            3s 3s ease ;                  
     transition:     background-color 2s 0s ease ,
                     margin-left      1s 2s ease ,
                     color            3s 3s ease ;
                     
} 
#steuerunglinks {
 /*background-image: url(Webseitenbilder/kleinehufe50x50.png;
   background-repeat: no-repeat;
   background-position: 10px;
 
   width: 130px;
    float: left;
    margin: 0px;
    padding-bottom: 50px;
    padding-top: 100px;
    padding-left: 0.5em;
    font-size: 1em;
       zoom:1;
}

#steuerunglinks ul {
       padding-left: 2em;
       padding-top: 0px;
       list-style-type: none;

}
#steuerunglinks ul ul {
    list-style-type: none;
    color: #002500;

}
#steuerunglinks li {
    padding-bottom: 1em;
    margin-top: 5px;
} 
*/
#steuerungunten a:hover {
   color: blue;
   text-decoration: underline;
   margin-left: 20px;
   background-color: white;
}
#steuerungunten {
/* background-color: yellow; */
    text-align: left;
    font-size: 1.2em;
       zoom:1;
}
#steuerungunten ul {
       padding-left: 2em;
       padding-top: 0px;
       list-style-type: none;
}
#steuerungunten a {
      color: green;
      text-decoration: none;
      padding: 0 10px;
-webkit-transition:  background-color 2s 0s ease ,
                     margin-left      1s 2s ease ,
                     color            3s 3s ease ;
  -moz-transition:   background-color 2s 0s ease ,
                     margin-left      1s 2s ease ,
                     color            3s 3s ease ;
 -o-transition:      background-color 2s 0s ease ,
                     margin-left      1s 2s ease ,
                     color            3s 3s ease ;
  -ms-transition:    background-color 2s 0s ease ,
                     margin-left      1s 2s ease ,
                     color            3s 3s ease ;
     transition:     background-color 2s 0s ease ,
                     margin-left      1s 2s ease ,
                     color            3s 3s ease ;
}

{
-webkit-transform: scale(1.4);
-moz-transform: scale(1.4);
-ms-transform: scale(1.4);
-o-transform: scale(1.4);
transform: scale(1.4);
}
#uebermich  {
    font-family: sans-serif, Arial, fantasy;
    font-style: italic;
    color: #445166;
    padding-top: 20px;
    margin-left: 1px;
}
#mustang {
    color: #800000;
    font-style: italic;
}

aside p {
    padding-top: 0px;
    padding-left: 5px;
    font-size: 0.7em;
    font-weight: bolder;
    text-align: center;
    color: #800000;
}
aside {
    width: 8px;
    float: right;
    margin-right: 170px;
}
aside img {
/* opacity: 0.8; Hintergrund tranceparent machen */
    margin: 3px;
    width: 167px;
}    
oben p {
   padding-bottom: 0em;
  
}

section {
    margin-left: 10px;
    margin-right: 50px;
   background-color: transparent; 
}
section h1 {
    padding-top: 60px;
    padding-bottom: 0.4em;
    color: #EFAE6E;
    margin-left: 10px;
}
section p {
    padding-bottom: 1em;
    font-family: Arial sans-serif fantasy;
    font-size: 1em;
    font-style: normal;
    color: #000000;
    padding-bottom: 0.4em;
    margin-left: 1px;
    
}
section ul {
      
     padding-left: 3em;
}
section li {
opacity: 0.7;    
    padding-bottom: 0.3em;
    padding-top: 8px;
    margin-top: 0.1em;
}
#seite {
    position: relative;
    min-height: 100%;
    width: 998px;
/*background-color: red */
    margin: 0 auto;
}
#inhalt {
    margin-bottom: 20px;
    text-align: center;
     position: fixed;
}
#fussbereich {
   /* background-color: red; */
    position: relative;
    bottom: 0px;
    width: 100%;
    height: 4em;
    line-height: 2em;
    text-align: center;
    margin-top: 5em;
}
#videobox1   {
    color: green;
    text-align: center;
    font-size: 0.8em;
}
#videobox2 {
    color: green;
    text-align: center;
    font-size: 0.8em;
}
#videobox3 {
    color: green;
    text-align: center;
    font-size: 0.8em;
}
#videobox4 {
    color: green;
    text-align: center;
    font-size: 0.8em;
}
#videobox5 {
    color: green;
    text-align: center;
    font-size: 0.8em;
}
#videobox6 {
    color: green;
    text-align: center;
    font-size: 0.8em;
}
#videobox7 {
    color: green;
    text-align: center;
    font-size: 0.8em;
}
#videobox8 {
    color: green;
    text-align: center;
    font-size: 0.8em;
}
#externelinksbox  {
     bottom: auto;
} 

  /*Menu Button*/
.ud_menu_icon {
      display: block;  /* das der Button zum Block wird*/
      position: absolute; 
     overflow: hidden;
     margin: 0;
     padding: 0;
     width: 45px;
     height: 45px;
     font-size: 0;
     text-indent: -9999px;
     appearance: none;
     box-shadow:none;
     border-radius: none;
     border: none;
     cursor: pointer;
     transition: background 0.3s;
     top: 180px;
     left: 2px;
     background-color: transparent;
     
}
.ud_menu_icon:focus {
      outline: none;
}
.ud_menu_icon span {
      display: block;
      position: absolute;
      top: 15px;
      left: 0;
      right: 0;
      height: 7px;
      background: #800000;
}
.ud_menu_icon span:before, .ud_menu_icon span:after {
 position: absolute;
 display: block;
 left: 0;
 width: 100%;
 height: 7px;
 background-color: #800000;
 content: "";     
}
.ud_menu_icon span:before {
      top: -14px;
}
.ud_menu_icon span:after {
      bottom: -14px;
}
.ud_menu_icon-X span{
     transition: background 0s 0.3s;
}
.ud_menu_icon-X span:before, .ud_menu_icon-X span:after {
      transition-duration: 0.3s, 0.3s;
      transition-delay: 0.3s, 0s;
}
.ud_menu_icon-X span:before {
       trasition-property: top, transform;
       }
.ud_menu_icon-X span:after {
    trasition-property: bottom, transform;  
}
.ud_menu_icon-X.is-active span{
      background: none;
}
.ud_menu_icon-X.is-active span:before {
      top: 0;
     transform: rotate(45deg);
}
.ud_menu_icon-X.is-active span:after {
      bottom: 0;
     transform: rotate(-45deg);
}
.ud_menu_icon-X.is-active span:before, .ud_menu_icon-X.is-active span:after {
      transition-delay: 0s 0.3s;
}