body          { font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif ;
                

}



#top          {     text-align:center;
                

}

.body           {                                                /*Hintergrund-Bild-Muster der Seite */
   
                                    background: size 10px;
                                    background-repeat:repeat;
}





#logo-name     {   color: rgb(235, 27, 82);                      /*Schatten der Schrift */
                   font-size: 80px;
                   text-shadow: 10px 1px 1px rgb(39, 38, 37),
                                10px -10px 0px rgb(39, 38, 37),
                                10px 1px 5px rgb(39, 38, 37),
                                10px -10px 5px rgb(39, 38, 37);



                   font-weight:  bolder;                
                   margin: 10px;
                   
                   

}


#logo-name-1     {   color: rgb(233, 240, 140);               
                     font-size: 18px;
                     text-shadow: 1px 1px 0px #333,
                                  2px 2px 0px #555,
                                  3px 3px 0px #777,
                                  4px 4px 0px #999,
                                  5px 5px 0px #bbb,
                                  6px 6px 0px #ddd;
                     font-weight:bolder;                
                     margin: -5px;
                     display:inline-flex;
                     padding: 20px;
                     border: 0px solid rgb(223, 226, 41);

 }






.container1                 {     margin: 30px;

}



#navigation       a        {      color: gray;
                                  padding: 40px;
                                  font-size: 30px;
                                  transition: ease-in-out 2s;

}

#navigation       a:hover  {   color: rgb(241, 239, 86);  
                               font-weight:normal;
                               font-family: cursive;
                               font-size: 30px;
                               transition: ease-in-out 1s;
                    
}





.container2                  {      padding: 5px;                    /*container2- 4xFotos mit links zu Seiten */  
                                    margin-top: 20px;
                                    
                                                                                               
}

.container2       img         {     margin: 30px;
                                    border-radius: 15px;
                                    border: 2px solid;
                                    border-color:rgb(240, 221, 48);
                                     

}

                        

.container5                   {              background-color: rgb(128, 146, 46);    /*container5-Zoom*/
                                             height: 490px;
                                             width: 460px;
                                             display: center;
                                             justify-content:center;
                                             align-items: center;                                          
                                             border-radius: 0px;
                                             border: 0px solid;
                                             border-color: rgb(221, 152, 42);
                                             margin:auto ;
    

}

.image                          {           height: 490px;
                                            width: 460px;
                                            background: url(bilder/2/Weltanschauungsmaschine-21.jpg);
                                            background-size: 110%;
                                            background-position: center;
                                            transition: 2s;
                                            cursor:pointer;
                                            border-radius: 0px;
                                            border-color: #ffff00;
                                            
                                        
}

.image:hover                    {           background-size: 250%;
                                            background-position: center;





}








.post                        {                                /*post- Fotos mit Überblendung Text*/
                                width: 300px;
                                height: 220px;
                                position:relative;
                                cursor: pointer;
                                display:inline-block;
}

.post:hover .post-s          {
                                width: 300px;

}

.post img                   {                                  /*post- Foto*/
                                display:block;
                                width: 300px;
                                height: 200px;

}
.post-s                     {                                  /* post- Überblendung*/
                                width: 0px;
                                height: 200px;
                                background: rgba(91, 114, 47, 0.5);
                                position: absolute;
                                top: 0;
                                display:flex;
                                justify-content:center;
                                align-items: center;
                                overflow: hidden;
                                transition: 0.5s ease;

}
.post-s h3                    {                                 /*post- Schrift und Rahmen-hover*/
                                color:white;
                                font-size: 30px;
                                border: 5px solid white;
                                padding: 10px 30px;
}






#image            img      {   width: 25%;                      /*Foto-image selbst mit Hut*/
                               margin-top: 25px; 
                               margin-bottom: 25px;
                               border: 10px; 
                               border-radius: 20px;
                               border-style: solid;
                               border-color:#c79125;
                               
                               


}




#main         {    max-width: 400px;                             /*main- Texte-Weltanschaung...*/
                   margin: auto;
                   padding: 16px;
                   text-indent: 50px;
                   color: rgb(24, 111, 165);
                   text-align: left;
                   letter-spacing: 2px;
                   
}    

#div.container10      {     width: 10px;  
                            margin: 20px;
    
}

#main1         {    max-width: 400px;                             /*main1- Texte-Habitable Zone... */
                    margin: auto;
                    padding: 16px;
                    text-indent: 50px;
                    color: rgb(24, 111, 165);
                    text-align: left;
                    letter-spacing: 2px;
    
}    

#main2         {    max-width: 400px;                             /*main2- Texte-Vita...*/
                    margin: auto;
                    padding: 16px;
                    text-indent: 50px;
                    color: rgb(24, 111, 165);
                    text-align: left;
                    letter-spacing: 2px;

}   









#div.container4       {         padding: 20px;                                         /*container4- Queerformat mousover Foto vergrössern*/
                                margin: 40px;
                                display: inline;
                                position:relative;

   /* damit der container die höhe des großen bildes annimmt */
                   /* andere formatierung, z.B. zentrieren/etc: */
                   /* .... */
}

#div.container4    div     {
                                 float:left;
                                 width: 230px;
                                 height: 150px;
                       /* ab hier kann man die abstände
                       und sonstiges der bilder eintragen */
                                 margin-left: 50px;
       
       
}
div.container4  img       {
                        width: 131px;  /* wir skalieren das große bild auf die kleine größe */
                        height: 160px; /* um verpixelung beim vergößern zu verhindern       */
                        border-style:solid;
                        border-color: darkgoldenrod;
                        border-radius: 0px;
                        margin: 10px;
                        transition: ease-in-out 3s;
                        margin: 20px;
}

div.container4  img:hover     {
                        position:relative;
                        margin-left: -85px; /* die hälfte des größenunterschiedes der bilder */
                        margin-top: -55px;  /* hier genau so */
                        width: 300px;       /* die weite beim vergrößern */
                        height: 366px;      /* die höhe beim vergrößern */
                        
}                               







#div.container7       {         padding: 20px;                                  /*container7-  Hochformate mousover Foto vergrössern*/
                                margin: 40px;
                                display: inline;
                                position:relative;

   /* damit der container die höhe des großen bildes annimmt */
                   /* andere formatierung, z.B. zentrieren/etc: */
                   /* .... */
}

#div.container7    div     {
                                float:left;
                                width: 195px;
                                height:300px;
                                                /* ab hier kann man die abstände
                                                und sonstiges der bilder eintragen */
                                margin-left: 0px;
    


}
div.container7  img       {                 /* skalieren den Container */
                            width: 122px;  /* wir skalieren das große bild auf die kleine größe */
                            height: 250px; /* um verpixelung beim vergößern zu verhindern       */
                            transition: ease-in-out 3s;
                            margin: 20px;
       
}

div.container7  img:hover     {
                                    position:relative;
                                    margin-left: -85px; /* die hälfte des größenunterschiedes der bilder */
                                    margin-top: -55px;  /* hier genau so */
                                    width: 319px;       /* die weite beim vergrößern */
                                    height: 647px;      /* die höhe beim vergrößern */
                                                         
}                               







#div.container8       {             padding: 20px;                      /*container8-  Hochformate mousover Foto vergrössern*/
                                    margin: 40px;
                                    display: inline;
                                    position:relative;

                                    /* damit der container die höhe des großen bildes annimmt */
                                    /* andere formatierung, z.B. zentrieren/etc: */
                                    /* .... */
}

#div.container8    div     {
                                    float:left;
                                    width: 195px;
                                    height:300px;
                                                    /* ab hier kann man die abstände
                                                    und sonstiges der bilder eintragen */
                                    margin-left: 0px;

}

div.container8  img       {                             /* skalieren den Container */
                                    width: 200px;  /* wir skalieren das große bild auf die kleine größe */
                                    height: 100px; /* um verpixelung beim vergößern zu verhindern       */
                                    transition: ease-in-out 3s;
                                    margin: 20px;

}

div.container8  img:hover     {
                                    position:relative;
                                    margin-left: -85px; /* die hälfte des größenunterschiedes der bilder */
                                    margin-top: -55px;  /* hier genau so */
                                    width: 651px;       /* die weite beim vergrößern */
                                    height: 327px;      /* die höhe beim vergrößern */
                             
}                               








#div.container9                 {   padding: 20px;                      /*container8-  Hochformate mousover Foto vergrössern*/
                                    margin: 40px;
                                    display: inline;
                                    position:relative;

                                                            /* damit der container die höhe des großen bildes annimmt */
                                                            /* andere formatierung, z.B. zentrieren/etc: */
                                                            /* .... */
}

#div.container9    div           {
                                    float:left;
                                    width: 195px;
                                    height:300px;
                                                            /* ab hier kann man die abstände
                                                            und sonstiges der bilder eintragen */
                                    margin-left: 0px;
                                  

}

div.container9  img              {                             /* skalieren den Container */
                                    width: 240px;  /* wir skalieren das große bild auf die kleine größe */
                                    height: 200px; /* um verpixelung beim vergößern zu verhindern       */
                                    transition: ease-in-out 3s;
                                    margin: 20px;

}

div.container9  img:hover         {
                                    position:relative;
                                    margin-left: -85px; /* die hälfte des größenunterschiedes der bilder */
                                    margin-top: -55px;  /* hier genau so */
                                    width: 421px;       /* die weite beim vergrößern */
                                    height: 400px;      /* die höhe beim vergrößern */

} 


*                   {                                   /* Wert festlegen zur browser groesse */
                        box-sizing:border-box

}

/* Positionieren Sie den Bildcontainer (wird benötigt, um den linken und rechten Pfeil zu positionieren)  */
.container         {
    position: relative;
    top: 80px;
    
}

/* Bilder standardmäßig ausblenden  */
.mySlides           {
                            display: none;
                            
}

 


/* Fügen Sie einen Zeiger hinzu, wenn Sie mit der Maus über die Miniaturbilder fahren */
.cursor             {
    cursor: pointer;
}

/* Weiter & Zurück Schaltflächen  */
.prev,
.next               {
    cursor: pointer;
    position:relative;
    top: 80%;
    width: auto;
    padding: 50px;
    margin-top: -80px;
    color: rgba(243, 184, 24, 0.705);
    font-weight: bolder;
    font-size: 50px;
    border-radius: 0 3px 3px 0;
    user-select: none;
    -webkit-user-select: none;
    
}

/* Position the "next button" to the right */
.next               {
    right: 0;
    border-radius: 3px 0 0 3px;
    
}

/* Fügen Sie beim Button klicken eine Hintergrundfarbe mit etwas Durchsicht hinzu  */
.prev:hover,
.next:hover         {
    background-color: rgba(243, 239, 31, 0.0);

   
}

/* Number text (1/3 etc) */
.numbertext         {
    color: #f0f070;
    border-style:solid;
    box-sizing: 25px;
    border-radius: 30em;
    font-size: 30px;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    padding: 8px 12px;
    position: absolute;
    top: 60px;
}

/* Container für Bildtext */
.caption-container  {
    text-align: center;
    height: 220px;
    font-size: 50px; 
    background-color: rgb(#ffff00);
    padding: 20px 16px;
    margin-top: 50px;
    color: rgb(11, 11, 142);
   
}

.row:after           {
    content: "";
    display: table;
    clear: both;
    
}

/* 100% / Anzahl = Säulen nebeneinander */
.column             {
    float:left;
    width: 20%;
    padding: 30px;
 
}

/* Fügen Sie einen Transparenzeffekt für Miniaturbilder hinzu  */
.demo                  {
    opacity: 0.6;
    
    
    
}

.active,
.demo:hover            {
    opacity: 1;
    
    
}







.container14       img         {    margin: 120px;                        /*container14- interner link zum Seitenanfang */ 
                                    width: 10%;                                 
                                    height: auto;
                                    border-radius: 15px;
                                    border: 0px solid;
                                    border-color:rgb(232, 211, 26);
                                    transition-duration: 4s;
                                    transition-delay: 0.7s;
                                                                                                         
                            
}


.container14      :hover      {                                           
                                    
                                        transform: scale(2,2);
                                                                          

                                                                                                                                                           
}







#image1            img          {   width: 45%;                      /*Foto-Apfelbaemchen-Erklaerung der Bilderfolge*/
                                    margin-top: 25px; 
                                    margin-bottom: 25px;
                                    border: 0px; 
                                    border-radius: 20px;
                                    border-style: solid;
                                    border-color:#3b2c0d;                                                                                                                                 
                                    scroll-behavior: smooth;
}








#footer      {      color: rgb(185, 187, 53);                            /*footer- copyright am Seitenende*/
                    font-size: 20px;
                    margin: 10px 0px 0px 00px;
                    margin-bottom: 25px;
                    display:inline-block;                
                    word-spacing: 8px;
                    text-decoration: underline rgb(123, 179, 123);
                    padding: 20px;
                    border-width: 5px;
                    border-style: solid;
                    border-color: rgb(204, 236, 22);
                    border-radius: 10px;
                    
                    
                    
                                           
}