/* Folgende Box mit abgerundeten Kanten und weißem Hintergrund. Ist auf allen Seiten verwendet. Wichtig: unter fontfamily wird die erste Schriftart gewählt, hier roboto, danach die anderen, wenn roboto nicht auf dem Rechner ist */ 

.wp_b_box {
   padding: 10px;
   background: #ffffff;
   color: #828282;
   border: 40px solid #ffffff;
   border-radius: 15px;
   font-size: 16px;
   font-family: Roboto, serif, sans-serif, Georgia, Times New Roman;
  opacity:1;
	box-shadow: 10px 20px 30px gray;
}
/* Folgende Box wie oben mit weißem Hintergrund. Unterschied: Es ist kein Schatten eingetragen.Wichtig:unter fontfamily wird die erste Schriftart gewählt, hier roboto, danach die anderen, wenn roboto nicht auf dem Rechner ist
 * Info: Ich habe diese Box für die Home- und die Yoga Seite verwendet. Damit das Bild oben voll in der Haupt Box ist (Kombi_Box_100) . Ich habe sozusagen eine weitere Box, diese Box in die Hauptbox integriert. Also vor den Text gesetzt nach dem Bild   */ 
.wp_b_box_2 {
   padding: 10px;
   background: #ffffff;
   color: #828282;
   border: 40px solid #ffffff;
   border-radius: 15px;
   font-size: 16px;
   font-family: Roboto, serif, sans-serif, Georgia, Times New Roman;
  opacity:1;

}


/* Nachfolgend wie oben mit overflow:hidden*/ 

.wp_b_box_overflow {
   padding: 0px;
   background: #ffffff;
   color: #828282;
   border: 0px solid #ffffff;
   border-radius: 15px;
   font-size: 16px;
   font-family: Roboto, serif, sans-serif, Georgia, Times New Roman;
  opacity:1;
	overflow:hidden;
	margin:20px
	
}

/* Nachfolgend 5 Boxen nebeneinander anordnen*/ 

.boxfive{
     float: left;
     width: 20%;
     padding: 20px;
     background: #eee;
     box-sizing: border-box;
	
}



/* Nachfolgend Maximal 3 Boxen nebeneinander*/



.box3{
     float: left;
     width: 33%;
     padding: 20px;
     background: #eee;
	 box-sizing: border-box;
    }


/* Kombination von den beiden oberen Boxen mit overflow:hidden. Das bedeutet, dass der Inhalt in der Box, wenn er zu groß ist, einfach an der Grenze der Box abgeschnitten wird. Genau so soll die Box aussehen. 
Wichtig: Padding und Border haben den Wert 0. 
Zusätzlich habe ich den CSS Befehl Margin:20px eingetragen. Also der Außenabstand von einem Element zum nächsten. War vorher nicht drin.
Oben Bild und darunter der Text-Inhalt. Zusätzlich habe ich im visuellen und nicht im Text-Editor den Text und das Bild mittig angeordnet. Im Text-Editor erschien dann folgender CSS Befehl: style="text-align: center;    */

.Kombi_box {
   padding: 0px;
   background: #ffffff;
   color: #828282;
   border: 0px solid #ffffff;
   border-radius: 15px;
   font-size: 16px;
   font-family: Roboto, serif, sans-serif, Georgia, Times New Roman;
  opacity:1;
	float: left;
     width: 20%;
     box-sizing: border-box;
	overflow:hidden;
	margin:20px;
	box-shadow: 10px 20px 30px gray;
}

/* Wie Kombi_Box. Nur mit einer Box und nicht mit 5 Boxen. Also keine 20 %, sondern 100 % width    */

.Kombi_box_100 {
   padding: 0px;
   background: #ffffff;
   color: #828282;
   border: 0px solid #ffffff;
   border-radius: 15px;
   font-size: 16px;
   font-family: Roboto, serif, sans-serif, Georgia, Times New Roman;
  opacity:1;
	float: left;
     width: 100%;
     box-sizing: border-box;
	overflow:hidden;
	margin:20px;
	box-shadow: 10px 20px 30px gray;
}
/*Nachfolgend für Fixierung des Headers, ich habe die CSS aber noch nicht eingetragen. 201117*/