/*
Theme Name: Child Theme for Bulan Theme
Theme URI: https://www.theme-junkie.com/themes/bulan/
Description: My Completely Revised Child Theme for Bulan
Version: 1.0
Author: M.R.
Author URI: http://how-to-become-a-dj.com
Template: bulan
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bulan
*/




/* SCHRIFTART */
@import url('https://fonts.googleapis.com/css?family=Abel');




/************* MOBILE FIRST DESIGN ***************** MOBILE FIRST DESIGN ***************** MOBILE FIRST DESIGN ****************
*              MOBILE FIRST DESIGN                   MOBILE FIRST DESIGN                   MOBILE FIRST DESIGN                 *
************** MOBILE FIRST DESIGN ***************** MOBILE FIRST DESIGN ***************** MOBILE FIRST DESIGN *****************/



#site-navigation a: visited { color: #eee !important; }





/* A: BASIS-MENÜ (= TOP-MENÜ für (a) SMALL-SCREENS und (b) alle SUB-PAGES) */


/* Menü "OBEN ANDOCKEN" (= "FIXED" TOP-MENÜ) */
#site-navigation .wide-container,
#site-navigation .slicknav_menu
{
	position: fixed !important; /* ACHTUNG: Da sich das FIXED TOP-MENÜ ÜBER DIE BESTEHENDE SEITE LEGT (diese VERDECKT), muss man die BESTEHENDE SEITE ETWAS RUNTERSCHIEBEN (s. VORHERIGER Css-Befehl) */
	top: 0px !important;
	z-index: 999 !important;	
	
	width:      100% !important;
	max-width:  100% !important; /*--> Aufhebung der max-width-Beschrängung des Parent-Themes*/
	min-height: 48px !important;
	/* max-height: 48px !important; -----> siehe NÄCHSTER BEFEHL, denn dies ist ABHÄNGIG VON JAVASCRIPT: */
	padding:    0px  !important;
	
	background-color: rgb(35,40,45);
	color: #eee;
}

/* Menü-SCHATTEN */
#site-navigation{   box-shadow: -24px -10px 50px #12eab8;   }

/* MENÜ FALLS JAVASCRIPT AKTIVIERT IST: AUF 48px HÖHE BEGRENZEN! (WENN KEIN Javascript aktiviert ist, erscheint das (JS-basierte) SLICKNAV-Menü gar nicht, weshalb man 
   dann das NORMALE Menü zeigen muss, das dann aber natürlich je nach Platz MEHR als 48px hoch sein muss, um alle Menüpunkte anzuzeigen. Daher folgendes NUR BEI AKTIVEM JS!) */
.jsEnabledPage #site-navigation .wide-container,
.jsEnabledPage #site-navigation .slicknav_menu
{
	max-height: 48px !important;
}

/* Rest der Seite UM DIE HÖHE DES OBEN ANGEDOCKTEN MENÜS NACH UNTEN VERSCHIEBEN (da obiges "fixed" Menü Teile der Seite "ÜBERLAGERT/VERDECKT") */
#page{   margin-top: 47px;  }

/* WRAPPER des Menüs soll KEIN PADDING haben (da sonst der HOME-Button nicht die KOMPLETTE HÖHE der Leiste einnnimmt): */
#site-navigation .wide-container .menu-wrapper       {	   padding:0px !important;      }

/* Ausblenden des per JS zugefügten Bereiches in dem - wenn das Menü LINKS erscheint - mein gelber Titel & Untertitel der Seite erscheinen! */
.startpageLeftMenu_WrapperForHeadlineAndSubHeadline
{
	display:none;
}
/* "Read my Posts"-Element GENERALL AUSBLENDEN aber EINBLENDEN AB 925px Breite: */
#site-navigation #menu-primary-items .myAdditionalMenuText,
#site-navigation .slicknav_menu .myAdditionalMenuText                                                 { display:none;  padding: 0px !important; }
@media (min-width: 925px) { #site-navigation .wide-container #menu-primary-items .myAdditionalMenuText{ display:inline;                         } }

/* SCHRIFT der MENÜPUNKTE */
#site-navigation .wide-container #menu-primary-items .menu-item a,
#site-navigation .wide-container #menu-primary-items .myAdditionalMenuText span
{
	font-family: "Oswald", sans-serif;
    font-size: 18px;
    font-style: italic;
    line-height: 1.5em;
    /*font-variant: small-caps;*/
	color: #eee;
}

/* MOUSEOVER-Animation:*/
#site-navigation .wide-container #menu-primary-items .menu-item a:hover {	color: yellow !important; /*#F8DB14*/       }
#site-navigation .wide-container #menu-primary-items .menu-item a       {   /* DAUER des FARBWECHSELS: */
																			-webkit-transition: color 0.25s;
																			-moz-transition:    color 0.25s;
																			-ms-transition:     color 0.25s;
																			-o-transition:      color 0.25s;
																			transition:         color 0.25s;  }	
#site-navigation .wide-container #menu-primary-items .menu-item:hover   {	/**/background-color: #20637c !important;   }
#site-navigation .wide-container #menu-primary-items .menu-item         {   /* DAUER des FARBWECHSELS: */
																			-webkit-transition: background-color 0.25s;
																			-moz-transition:    background-color 0.25s;
																			-ms-transition:     background-color 0.25s;
																			-o-transition:      background-color 0.25s;
																			transition:         background-color 0.25s; }
/* Häusschen OHNE HOVER belassen: */
#site-navigation .wide-container #menu-primary-items .menu-item:first-child:hover     {  background-color:  rgb(255,100,0) !important;   }	
#site-navigation .wide-container #menu-primary-items .menu-item:first-child a:hover   {  color:             #FFF !important;             }	
#site-navigation .wide-container #menu-primary-items .menu-item:first-child a:hover i { text-shadow:        1px 1px #0a12ff !important;  }	


/* MENÜPUNKT-PADDINGS: */
#site-navigation .wide-container #menu-primary-items .menu-item,
#site-navigation .wide-container #menu-primary-items .myAdditionalMenuText
{
	padding:10px 16px !important;
}

/* MENÜ-PUNKT 1 (= HOME oder HAUSSYMBOL): */
#site-navigation .wide-container #menu-primary-items .menu-item:nth-Child(1)
{
	padding:10px 26px!important;																										             /*padding: 0px !important;*/
	background-color: red;
	background-color: rgb(255,200,0); /*AUCH GUT: rgb(255,50,0) oder rgb(255,200,0) oder rgb(255,180,0) */
	margin-right: 16px;		
	text-shadow: 1px 1px #0a12ff !important;
}
/* STYLE-ABWEICHUNGEN, FALLS DAS HÄUSCHEN-SYMBOLS ANGEZEIGT WIRD (was NUR BEI AKTIVIEM JAVASCRIPT angezeigt wird): */
.jsEnabledPage #site-navigation .wide-container #menu-primary-items .menu-item:nth-Child(1)
{
	padding:0px !important;
}
.jsEnabledPage #site-navigation .wide-container #menu-primary-items .menu-item:nth-Child(1) a
{
    font-size: 24px !important;
	
}
.jsEnabledPage #site-navigation .wide-container #menu-primary-items .menu-item:nth-Child(1) i
{
   /**/ padding: 10px 26px !important;	
}

/* ABOUT + CONTACT RECHTS ANDOCKEN (nicht per FLOAT sondern per POSITION:ABSOLUTE (da FLAOT die Reihenfolge ändert/verfälscht)*/
#site-navigation .wide-container #menu-primary-items                  {  position: relative; }
#site-navigation .wide-container #menu-primary-items li:nth-of-type(6){  position: absolute;  right: 185px;  }
#site-navigation .wide-container #menu-primary-items li:nth-of-type(7){  position: absolute;  right: 70px;   }
/* Wenn JAVASCRIPT AKTIVIERT ist (was den Abount-Text ÄNDERT), dann ab folgender Breite die Abstände korrigieren: */
@media (max-width: 1359px) 
{ 	
	.jsEnabledPage #site-navigation .wide-container #menu-primary-items li:nth-of-type(6){  position: absolute;  right: 144px; }
	.jsEnabledPage #site-navigation .wide-container #menu-primary-items li:nth-of-type(7){  position: absolute;  right: 60px;  } 
}

/* "CONTACT" DES HAUPT-MENÜS (nicht des SLICK-Menüs) NUR DANN ZEIGEN WENN A) JAVASCRIPT AKTIVIERT IST (welches es kontinuierlich verkleinert) ODER (B) wenn kein JS aktiv ist: AB 768 Breite*/
#site-navigation .wide-container #menu-primary-items li:nth-of-type(7)                            {  display: none;     }
@media (min-width: 768px){ #site-navigation .wide-container #menu-primary-items li:nth-of-type(7) {  display: inline;   }  }
@media (min-width: 1200px){ .home.jsEnabledPage #site-navigation .wide-container #menu-primary-items li:nth-of-type(7){  display: block;   }  }

/* ABOUT ERST AB EINER BESTIMMTEN BREITE EINBLENDEN: */	
#site-navigation .wide-container #menu-primary-items li:nth-of-type(6){  display:none;  }/**/
@media (min-width: 1140px) 
{
	#site-navigation .wide-container #menu-primary-items li:nth-of-type(6){  display:inline;  }/**/
}	
				 					 
/* Nur falls JS aktiviert ist (welches den Einleitungssatz einfügt, der mit 3 Pünktchen endet): PÜNKTCHEN vor den 4 HAUPT-KATEGORIE-Menüpunkten */
.jsEnabledPage #site-navigation .wide-container #menu-primary-items li:nth-of-type(2) a:before,
.jsEnabledPage #site-navigation .wide-container #menu-primary-items li:nth-of-type(3) a:before,
.jsEnabledPage #site-navigation .wide-container #menu-primary-items li:nth-of-type(4) a:before,
.jsEnabledPage #site-navigation .wide-container #menu-primary-items li:nth-of-type(5) a:before {    content: "..." !important;	   }
@media (max-width: 850px) 
{
	/* Kategorien OHNE PÜNKTCHEN DAVOR darstellen (aus Platzersparnisgründen) */
	#site-navigation .wide-container #menu-primary-items li:nth-of-type(2) a:before,
	#site-navigation .wide-container #menu-primary-items li:nth-of-type(3) a:before,
	#site-navigation .wide-container #menu-primary-items li:nth-of-type(4) a:before,
	#site-navigation .wide-container #menu-primary-items li:nth-of-type(5) a:before{   content: "" !important;	}	
}


/* SUCH-BUTTON stylen: */	
#site-navigation .search-toggle
{
	/* Button GANZ NACH RECHTS AN DEN RAND schieben: */
	right: 0px !important; 
	font-size:19px;
	padding: 10px 16px; 
	line-height:1.5em;
}
/* SUCH-BUTTON NUR ANZEIGEN WENN A: JAVASCRIPT AKTIV ist oder B: BREITE > 768 ist: */
#site-navigation .search-toggle							  {	 display: none;    }
.jsEnabledPage #site-navigation .search-toggle            {	 display: block;   }
@media (min-width:768px){  #site-navigation .search-toggle{  display: block;   }  }

/* SUCH-"EINGABEFELD" UNTER DAS FIXED TOP-MENÜ "FIXIEREN" (vom Code her genau WIE DAS "FIXED-TOP"-Menü) */
.search-area,
.search .search-area
{
	position: fixed !important;
	top: 48px !important;
	z-index: 1000 !important;	
	
	width:      100% !important;
	max-width:  100% !important;
}
/* Such-SCHRIFTART der (aufgeklappten) SUCHMASKE: */
.search-area .searchform .search-field
{
	font-family: "Oswald", sans-serif;
}








/* B: SLICKNAV-MENÜ (= Smartphone-typisches Mini-Menü): */ 
.slicknav_menu .slicknav_icon-bar 
{
	background-color: white !important;
	padding:2px;			
}
.slicknav_btn 
{
	float:left !important;
	margin:0px;
	padding: 17px !important;
	background-color: red !important;
	border-radius: 1px;
}
.slicknav_btn .slicknav_icon
{
	margin:0px;
}

.slicknav_nav .menu-item a
{
	font-family: Oswald, sans-serif;
	font-style: italic;
	font-variant: small-caps;/**/
}
.slicknav_nav li:nth-of-type(2) a::before,
.slicknav_nav li:nth-of-type(3) a::before,
.slicknav_nav li:nth-of-type(4) a::before,
.slicknav_nav li:nth-of-type(5) a::before
{
	/*color:yellow;*/
	content: ". . . ";
}
.slicknav_nav .menu-item a:hover
{
	background-color: #333 !important;
	color: #F8DB14;/*yellow*/
}











/* C: MENÜ der BIG-SCREEN-"STARTSEITE" (= Mehr als 960 PIXELN BREITE:) */
@media(min-width: 1200px)
{
	/* Platz machen für das SEITEN-MENÜ (da dieses - weil es "position:FIX" ist - die Seite sonst teilweise "ÜBERLAGERN/VERDECKEN" würde) */
	.home .site-header,
	.home .site-content,
	.home .site-footer
	{
		margin: 0px;
		margin-left: 20%;/*--> ACHTUNG: Sobald die SideNavigation der Startseite (= .home #site-navigation (s.u.)) ihre MAX-WIDTH erreicht hat, setze JS diesen Wert FIX auf 250px.*/
	}	
	
	/* Umwandeln des FIXED "TOP"-MENÜ in ein FIXED "LEFT"-Menü: */
	.home #page
	{
		/* WICHTIG: Da das Navigationsmenü bei der hiesigen Breite nicht mehr als "FIXED TOP"-Menü realisiert ist verdeckt es oben nix mehr! Daher...: */
		margin-top: 0px !important;
	}
	.home #site-navigation
	{
		position: fixed !important;
		z-index: 9999 !important;
		left: 0px !important;
		width: 20% !important;
		min-width: 250px !important;
		height: 100% !important;
		box-sizing: border-box !important;
		margin:0px !important;
		background: rgb(25,25,25);
	}
	.home #site-navigation .wide-container
	{
		position: relative !important;
		display: block;
		margin: 0px;
		padding: 0px;
		border: 0px;
		background-color: rgb(25,25,25);
	}
	
	
	/* EINBLENDEN und STYLEN der LEFTMENÜ-ÜBERSCHRIFT+UNTERTITEL stylen (welche ich ja per JS hinzugefügt habe) */
	.home #site-navigation .startpageLeftMenu_WrapperForHeadlineAndSubHeadline
	{
		display:block;
		box-sizing: border-box !important;
		text-align:center !important;
		line-height: normal;
		padding: 25px 14px 10px 14px !important; /*--> Gilt nur für die MediaQuery in der ich mich hier gerade befinde! WEITERE MEDIA-QUERIES siehe UNTERHALB HIESIGER MEDIA-QUERY! */
	}
	.home #site-navigation .startpageLeftMenu_Headline
	{
		/* NICHT mit folgender CSS-Anweisung VERKNÜPFEN, denn sonst müsste man in den unten folgenden MediaQueries immer auch :hover und :visited angeben, um Size-Wechsel zu verhindern.*/
		font-size: 40px !important; /*--> Gilt nur für die MediaQuery in der ich mich hier gerade befinde! WEITERE MEDIA-QUERIES siehe UNTERHALB HIESIGER MEDIA-QUERY! */
		font-weight: 400; /*--> Gilt nur für die MediaQuery in der ich mich hier gerade befinde! WEITERE MEDIA-QUERIES siehe UNTERHALB HIESIGER MEDIA-QUERY! */		
	}
	
	.home #site-navigation .startpageLeftMenu_Headline,
	.home #site-navigation .startpageLeftMenu_Headline:hover,
	.home #site-navigation .startpageLeftMenu_Headline:visited
	{	
		font-family: 'Arial', 'Verdana', 'Helvetica', sans-serif !important;
		color: #F8DB14 !important;
	}
	.home #site-navigation .startpageLeftMenu_SubHeadline
	{
		box-sizing: border-box !important;
		text-align: center !important;
		line-height: normal;

		padding:35px 5px; /*--> Gilt nur für die MediaQuery in der ich mich hier gerade befinde! WEITERE MEDIA-QUERIES siehe UNTERHALB HIESIGER MEDIA-QUERY! */
		font-size:  26px; /*--> Gilt nur für die MediaQuery in der ich mich hier gerade befinde! WEITERE MEDIA-QUERIES siehe UNTERHALB HIESIGER MEDIA-QUERY! */
		font-family: 'Abel', 'Arial', 'Verdana', 'Helvetica', sans-serif !important;
		font-weight: normal !important;
		line-height: 1.2;
		color: #FFFFFF !important;
	}
	.home #site-navigation .startpageLeftMenu_SubHeadline span
	{
		color: #F8DB14 !important;
	}	
	
	/* Falls KEIN JAVASCRIPT aktiviert ist: Text "HOW TO BECOME A DJ" per BEFORE einfügen. Falls doch: ENTFERNEN! (Da er ja dann PER JS eingefügt wird.) */
	.home #site-navigation .wide-container .menu-wrapper ul::before
	{
		content: 'How to become a DJ';
		display:block;
		padding: 25px 14px 45px 14px;	
		text-align:center;
		font-family: 'Arial', 'Verdana', 'Helvetica', sans-serif !important;
		font-size: 40px;
		color: rgb(232, 232, 232);
		color: #F8DB14;
		line-height: normal;
	}
	.home.jsEnabledPage #site-navigation .wide-container .menu-wrapper ul::before
	{
		content: '' !important;
		padding: 0px;
	}	
	
	/* Falls KEIN JAVASCRIPT aktiviert ist: Den Text "My latest Posts" per BEFORE einfügen. Falls doch: ENTFERNEN! (Da er ja dann PER JS eingefügt wird.)  */
	.home.blog #content #primary #main::before
	{
		content: 'My latest posts';
		display:block;
		margin: 13px 13px 13px 0px;
		padding: 0px;	
		text-align:left;
		font-family: "Oswald",sans-serif !important;
		font-size: 36px;
		color: #454545;
		line-height: 1.1;
	}
	.home.blog.jsEnabledPage #content #primary #main::before
	{
		content: '' !important;
		margin: 0px;
	}
	
	/* ABOUT & CONTACT jetzt NICHT MEHR RECHTS ANDOCKEN (was ich ja bewusst per position:ABSOULTE statt FLOAT gemacht habe, damit das Float nicht die Reihenfolge verändert): */
	.home #site-navigation .wide-container #menu-primary-items li:nth-of-type(6),
	.home #site-navigation .wide-container #menu-primary-items li:nth-of-type(7)
	{  
		position: static; 
	}
	/* MENÜ-EINTRÄGE jetzt UNTEREINANDER anordnen & entsprechend umstylen: */
	.home #site-navigation #menu-primary-items .menu-item,
	.home #site-navigation #menu-primary-items .menu-item:hover,
	.home #site-navigation .wide-container #menu-primary-items li /* --> NUR MIT DIESEM SELEKTOR hab ich es geschafft, das oben definierte display:INLINE von ABOUT zu überschreiben! */
	{
		display: block;
		width: 100%;
		padding: 16px 16px;
		border-top: 1px dashed #464646;
		
		background-color: rgb(25,25,25) !important;
	}
	.home #site-navigation #menu-primary-items .menu-item:last-child
	{
		border-bottom: 1px dashed #464646 !important;
	}
	.home #site-navigation #menu-primary-items .menu-item a
	{
		color: #eee;
	}
	.home #site-navigation .wide-container .menu-wrapper .menu-item a
	{
		font-family: 'Verdana', 'Arial', 'Helvetica', sans-serif !important;
		font-weight: 400;
		font-size: 20px;
		line-height: 30px;
		color: rgb(232, 232, 232);
	}
	
	/* AUSBLENDEN von "HOME" und "READ MY POSTS": */	
	.home #site-navigation #menu-primary-items .menu-item:nth-Child(1), /* = Homepage-Link zur Startseite (hier: unnötig) */
    .home #site-navigation #menu-primary-items .myAdditionalMenuText   /* = Mein zugefügter Menü-Text "Read my posts"    */
	{
		display:none;
	}
	
	/* Falls JAVASCRIPT aktiv ist: Ausblenden der 4 HAUPT-KATEGORIEN aus dem Menü, da diese ja (per JS) auch nochmal MITTIG erscheinen: */ 
	.home.jsEnabledPage #site-navigation #menu-primary-items li:nth-of-type(2), /* = Kategorie "...Exploring the Basics"      */
	.home.jsEnabledPage #site-navigation #menu-primary-items li:nth-of-type(3), /* = Kategorie "...Learning to DJ"            */ 
	.home.jsEnabledPage #site-navigation #menu-primary-items li:nth-of-type(4), /* = Kategorie "...Creating Songs & Remixes"  */
	.home.jsEnabledPage #site-navigation #menu-primary-items li:nth-of-type(5)  /* = Kategorie "...Promoting Myself"          */
	{
		display:none;
	}	

	/* Suchbutton ausblenden (macht bei diesem Design keinen Sinn! außerdem gibts ja in der Sidebar genügend andere Such-Funktionen): */
	.home #site-navigation .wide-container .search-toggle
	{
		display: none;
	}

}
/* WEITERE MENÜ-SCHRIFT-GRÖSSEN (JE NACH SEITENBREITE) */
@media(max-width: 1510px) { .home #site-navigation .startpageLeftMenu_Headline   {	font-size: 39px !important; padding-left: 0px; 	padding-right: 0px;	}	}
@media(max-width: 1510px) { .home #site-navigation .startpageLeftMenu_SubHeadline{	font-size: 26px;            }	}
@media(max-width: 1460px) { .home #site-navigation .startpageLeftMenu_Headline   {  font-size: 38px !important; }	}
@media(max-width: 1480px) { .home #site-navigation .startpageLeftMenu_SubHeadline{	font-size: 25px;	        }	}	
@media(max-width: 1410px) { .home #site-navigation .startpageLeftMenu_Headline   {	font-size: 37px !important; }	}	
@media(max-width: 1440px) { .home #site-navigation .startpageLeftMenu_SubHeadline{	font-size: 24px;            }	}
@media(max-width: 1360px) { .home #site-navigation .startpageLeftMenu_Headline   {	font-size: 36px !important; }	}
@media(max-width: 1390px) { .home #site-navigation .startpageLeftMenu_SubHeadline{	font-size: 23px;            }	}
@media(max-width: 1320px) { .home #site-navigation startpageLeftMenu_WrapperForHeadlineAndSubHeadline{ padding:    0px !important; }	
                            .home #site-navigation .startpageLeftMenu_Headline                       { font-size: 34px !important; }	}	
@media(max-width: 1340px) { .home #site-navigation .startpageLeftMenu_SubHeadline{  font-size: 23px; padding-left:0px; padding-right:0px; }	}	
@media(max-width: 1290px) { .home #site-navigation .startpageLeftMenu_SubHeadline{	font-size: 22px;            }	}	
	
	
	
	
	
	
	
	
	
/* D: PHOTO-MENÜPUNKTE der STARTSEITE (das ich per JS erstellt habe): */
#myHomepagePhotoMenu
{
	background-color: f5f5f5;
}

#myHomepagePhotoMenu_IntroSentence,
#myHomepagePhotoMenu .categoryHeadline
{
    font-variant: small-caps;
	color: black;
	font-style: italic;
	
}
#myHomepagePhotoMenu_IntroSentence
{
	/* Überschriftsatz (= der, der ÜBER meinen 4 Bild-Menüpunkten erscheint) MITTIG platzieren: */
	font-size: 36px;
	text-align:center;
	margin: 8px 0px 26px 0px;
}
#myHomepagePhotoMenu .categoryHeadline
{
	font-size: 27px;
	font-weight: bold;
}
#myHomepagePhotoMenu_CategoriesWrapper
{
	/* Meine 4 (per JS erstellten) Bildmenü-Punkte (die ja als "LISTE" (<li>) realisiert sind) OHNE PUNKTE und EINRÜCKUNG darstellen */
	list-style:none;
	padding:0px;
}
.myHomepagePhotoMenu_CategoryContainer
{
	/* Meine 4 (per JS erstellten) Bildmenü-Punkte (die ja als "LISTE" (<li>) realisiert sind) NEBENEINANDER platzieren: */
	display:inline-block;
	width:25%;
	margin:0px;
	padding:0px;
	
	/*border: 1px solid green;*/
}
.myHomepagePhotoMenu_CategoryContainer .categoryHeadline
{
	text-align:center;
}
/*MOUSEOVER-Animation:*/
.myHomepagePhotoMenu_CategoryContainer .categoryHeadline       {   /* DAUER PRO ANIMATION: */
											  				  -webkit-transition: color 0.1s ease-in-out;
															     -moz-transition: color 0.1s ease-in-out;
															      -ms-transition: color 0.1s ease-in-out;
															       -o-transition: color 0.1s ease-in-out;
															          transition: color 0.1s ease-in-out;  }
															  
.myHomepagePhotoMenu_CategoryContainer .categoryHeadline:hover {/* ZUWEISUNG der Animationen: */
																  color: #0c7e8b !important;      }
.myHomepagePhotoMenu_CategoryContainer .categoryHeadline:before
{
    /*PÜNKTCHEN vor den Kategorie-Namen*/
	/*content: "...";	*/
}

.myHomepagePhotoMenu_CategoryContainer .categoryImage
{
	display:block;
	margin:auto;
	width: 80%;
	min-height: 135px;
	/*border: 2px solid rgb(231,209,81);*/
	
	box-shadow: 0px 0px 8px #353535;
	
    background-position: center center;
	background-repeat: no-repeat;
	background-size: 100% auto;
}

.myHomepagePhotoMenu_CategoryContainer:nth-Child(1) .categoryImage { background-image: url("MainCategoryPic 1/MainCat1_PicA_Final.jpg"); background-position: center center; }
.myHomepagePhotoMenu_CategoryContainer:nth-Child(2) .categoryImage { background-image: url("MainCategoryPic 2/MainCat2_PicA_Final.jpg"); background-position: center center; }
.myHomepagePhotoMenu_CategoryContainer:nth-Child(3) .categoryImage { background-image: url("MainCategoryPic 3/MainCat3_PicA_Final.jpg"); background-position: center center; }
.myHomepagePhotoMenu_CategoryContainer:nth-Child(4) .categoryImage { background-image: url("MainCategoryPic 4/MainCat4_PicA_Final.jpg"); background-position: center center; }

/*MOUSEOVER-Animation:*/
.myHomepagePhotoMenu_CategoryContainer .categoryImage       {   /* DAUER PRO ANIMATION: */
											  				  -webkit-transition: background-size 0.25s ease-in-out;
															     -moz-transition: background-size 0.25s ease-in-out;
															      -ms-transition: background-size 0.25s ease-in-out;
															       -o-transition: background-size 0.25s ease-in-out;
															          transition: background-size 0.25s ease-in-out;  }
															  
.myHomepagePhotoMenu_CategoryContainer .categoryImage:hover {  /* ZUWEISUNG der Animationen: */
																background-size: 110% !important;   }															  





















/* E: HINTERGRUND-BILD + VIERECK MIT WEBSITE-TITEL: */

#masthead.site-header::after,
#masthead.site-header:after
{
	/*Gelb-Stich entfernen, den das Original-Theme jedem Hintergrundbild verpasst */
	background-color: rgba(204, 137, 0, 0.3); /* = gelber ORIGINAL-Filter des Original-Themes (bei Bedarf ändern) */
	background-color: inherit;
	
	background-repeat: no-repeat;
}

#masthead .site-branding .wide-container
{
	padding:0px !important;
}
	
/* Viereck mit Webseiten-Titel */
#masthead.site-header .site-branding .site-title a
{
	text-shadow: 1px 1px 15px black;
	box-shadow: 1px 1px 15px black;
	
	/*white-space: nowrap;*/
}
#BGContainerA { background-size: cover !important; background-position: 50% 50% !important; } 
#BGContainerB { background-size: cover !important; background-position: 50% 50% !important; } 
#BGContainerC { background-size: cover !important; background-position: 50% 50% !important; } 
#BGContainerD { background-size: cover !important; background-position: 50% 100% !important; } 
@media (max-width: 1099px) 
{
	#BGContainerA { background-size: cover !important; background-position: 50% 50% !important; } 
	#BGContainerB { background-size: cover !important; background-position: 50% -180px !important; } 
	#BGContainerC { background-size: cover !important; background-position: 50% 470px !important; } 
	#BGContainerD { background-size: cover !important; background-position: 50% 100% !important; } 	
}
@media (max-width: 880px) 
{
	#BGContainerA { background-size: cover !important; background-position: 50% 50% !important; } 
	#BGContainerB { background-size: cover !important; background-position: 50% -120px !important; } 
	#BGContainerC { background-size: cover !important; background-position: 50% 365px !important; } 
	#BGContainerD { background-size: cover !important; background-position: 50% 100% !important; } 	
}
@media (max-width: 599px) 
{
	#BGContainerA { background-size: cover !important; background-position: 50% 50% !important; } 
	#BGContainerB { background-size: cover !important; background-position: 50% -97px !important; } 
	#BGContainerC { background-size: cover !important; background-position: 50% 281px !important; } 
	#BGContainerD { background-size: cover !important; background-position: 60% -18px !important; } 	
}
/* Den (dank JS) ab folgender Breite MITTIG erscheinenden Seiten-UNTERTITEL der LEFT-SIDE-Menüs (das ja bei dieser Größe ausgeblendet ist) stylen: */
@media (max-width: 1199px)
{
	.startpageLeftMenu_SubHeadline
	{
		padding: 0px 40px; 
		font-family: 'Abel', 'Arial', 'Verdana', 'Helvetica', sans-serif !important;
		font-weight: normal !important;
		font-size:25px;
		line-height: 1.2;
		color: #FFFFFF !important;
		text-align: center !important;		
		text-shadow: 1px 1px 1px black, /* Scharfer 1px-Schatten */
					 0px 1px 30px black;/* Unscharfer 30px-Schatten */	  
	}
}
/* PARALLAX-SCROLLEN des HINTERGRUNDBILDES (nur für GROSSE Bildschirme) */
@media screen and (min-width: 40em)
{
	/* Falls der Browser Parallax-Scrolling bzw. Css-"Perspective" kennt, dann den "PARALLAX"-Scroll-Effekt durchführen: */
	@supports ((perspective: 1px) and (not (-webkit-overflow-scrolling: touch))) 
	{
		/* SIEHE MEIN JAVASCRIPT-FILE (denn die CSS-VARIANTE FUNZT NICHT MIT MEINEM DESIGN) */
	}
}








/* F: WIDGET-Layout: */

.site-content .widget
{
	margin-bottom: 30px;
}
.site-content .widget .textwidget img
{
	margin-bottom: 12px;
	
	float: right;	
	
	max-width: 40%;  
	box-sizing: border-box;
	margin:10px;
	padding: 0px;	
	
} 
.site-content .widget .textwidget p
{
	max-width: 100%;  
	
	box-sizing: border-box;
	margin:0px;
	padding: 10px;	
} 

.site-content .widget .widget-title
{
	font-family: 'Verdana', 'Arial', 'Helvetica', sans-serif !important;
	font-size: 14px;
	font-style: normal;
	letter-spacing: 1px;/**/
	margin: 13.5px 0;
} 

.site-content .widget .textwidget.custom-html-widget p
{
	font-family: 'Arial', 'Helvetica', sans-serif !important;
	font-size: 13.5px;
	font-style: normal;
	letter-spacing: 0px;/**/
} 
.site-content .widget.widget_categories .cat-item a
{
    font-family: 'Verdana', 'Arial', 'Helvetica', sans-serif !important;
	font-size: 13.5px;
	font-style: normal;
	letter-spacing: 0px;/**/
}
.site-content .widget.widget_categories .cat-item a:before
{
    content: "...";	
}
.site-content .widget .textwidget.custom-html-widget p span.myfattext
{
	font-weight: bold !important;
	/*color:red;*/
} 







/* G: ARTIKEL-SEITEN */

.single-post .site-content .page-header .page-title
{
	text-align:center;
}
.single-post .site-content .entry-header .cat-links /* Ausblenden der ÜBER den Artikeln angezeigten "Kategorien in denen der Artikel einsortiert ist" */
{
	display:none;/**/
}
.single-post .site-content .hentry .entry-header .published
{
	color: #e69a00;
}
.single-post .site-content .hentry .entry-header .fa-circle
{
	display:none;/**/
}
.single-post .post .entry-content .entry-header /* = Ausblenden der IN den Artikeln befindlichen "Excerpts" (= Vorschau-Texte) */
{
	display: none;/**/  
}







/* H: "KATEGORIE/SCHLAGWORT/SUCHERGEBNIS"-Seiten (= "ARCHIV"-Seiten) stylen: */
.archive .site-content .page-header .page-title
{
	text-align:center;
}
.archive .site-content .page-header .page-title:before
{
    content: "Latest Posts on: ";	
    color: orange;
}
.archive .site-content .entry-header .cat-links /* Ausblenden der ÜBER den Artikeln angezeigten "Kategorien in denen der Artikel einsortiert ist" */
{
	display:none;/**/
}
.archive .site-content .hentry .entry-header .published
{
	color: #e69a00;
}
.archive .site-content .hentry .entry-header .fa-circle
{
	display:none;/**/
}
.archive .site-content .post .entry-content .entry-header /* = Ausblenden der IN den Artikeln befindlichen "Excerpts" (= Vorschau-Texte) */
{
	display: none; /**/
}
/* Nebeneinander platzieren + OBEN ANDOCKEN: */
.archive .content-area .site-main article
{
	display: inline-block;
	
	width: 47%;
	box-sizing: border-box;
	margin: 0px; 
	padding: 0px;
	
	vertical-align: top; /**/
}
/* Nebeneinander-platzierte VORSCHAU-Artikel GLEICHMÄSSIG VERTEILEN (Blocksatz): */
.archive .content-area .site-main 
{
	text-align: justify; /* Article als BLOCKSATZ arrangieren: */
	font-size: 18px; /* WICHTIG: IE 9/10 doen't like font-size: 0; */
}
.archive .content-area .site-main:after 
{
  /* Unsichtbares Objekt, das für das verteilen der Boxen NÖTIG ist: */ 
  content: '';
  font-size: 0.1px; /* IE 9/10 don't like font-size: 0; */
  width: 100%;  /* Ensures there are at least 2 lines of text, so justification works */
  display: inline-block;
}
.archive .content-area .site-main .post .entry-content .entry-header
{
	display: block; /**/
}
.archive .content-area .site-main .post .entry-header
{
	text-align: left; /* = Überschrift LINKSBÜNDIG ausrichten! */
}
/* Da "VORSCHAU"-Seiten bei diesem Theme sowohl - falls vorhanden - das "Excerpt" des Artikels anzeigen als auch den
   "EIGENTLICHEN" Artikel (sofern man vergessen hat einen "MORE"-Abschnitt festzulegen, dann sogar den KOMPLETTEN ARTIKEL)
   stelle ich mit folgendem Befehl sicher, dass pro Vorschau-Artikel MAXIMAL EIN CHILD-ELEMENT (= idR. <div> oder <p>) erscheint: */
.archive .content-area .site-main .post .entry-content * {	display:none;   }
.archive .content-area .site-main .post .entry-content *:nth-Child(1) {	display:block;   }







/* E: HAUPTBEREICH-LAYOUT (= A: Text&Suchergebnis-Bereich (ID = #primary) + B: Sidebar-Bereich (ID = #secondary) ) */


/* HAUPTTEXT-AREA (= primary) + SIDEBAR-AREA (= secondary) */
.site-content #primary { padding-left: 40px; } /* = 40px Abstand zum linken Rand */
.site-content #secondary { padding-right: 40px; } /* = 40px Abstand zum rechten Rand */


/* Auf "nomalen" Seiten den Haupt-Bereich STARK hochschieben: */
/* Auf "Startpage"-Site den Haupt-Bereich NUR LEICHT hochschieben: */
.site-content                       {  margin-top: -270px;   }
.home .site-content                 {  margin-top: -85px;    }
/* Auf "nomalen" Seiten den Haupt-Bereich 97% BREIT machen: */
/* Auf "Startpage"-Site den Haupt-Bereich 100% BREIT machen: */
.site-content .wide-container       {  max-width: 97%; /* etwas SCHMALER/ENGER machen */
                                       padding: 20px 0px 40px 0px; /* PADDING AUF 0 DAMIT DIE KATEGORIEN SICH DIE VOLLE BREITE TEILEN  */
								       box-shadow: 3px 6px 50px rgb(154,154,154);    
} 
.home .site-content .wide-container {  width:100%;
                                       max-width:100%;
} 



/* Bei 1920&mehr x 1080&mehr: */
@media (max-width: 1799px)/* --> ACHTUNG: WENN MAN DIESE ZAHL ÄNDERT DANN BITTE OBEN AUCH DIE GRENZE ÄNDERN AB DER DAS SITE-MENÜ ZUM TOP-MENÜ WIRD! */
{
	.site-content                         {  margin-top: -270px; 				  }
	.home .site-content                   {  margin-top:  -85px; 				  }
    .site-content .wide-container         {                      				  }
	.home .site-content .wide-container   {                       				  }
	.myHomepagePhotoMenu_CategoryContainer{ 									  }
}

/* Bei 1600/1680 x 768/900/1024/1050/1200: */
@media (max-width: 1499px)/* --> ACHTUNG: WENN MAN DIESE ZAHL ÄNDERT DANN BITTE OBEN AUCH DIE GRENZE ÄNDERN AB DER DAS SITE-MENÜ ZUM TOP-MENÜ WIRD! */
{
	.site-content                         {  margin-top: -270px; 				  }
	.home .site-content                   {  margin-top:  -85px; 				  }
    .site-content .wide-container         {                      				  }
	.home .site-content .wide-container   {                      				  }
	.myHomepagePhotoMenu_CategoryContainer{  									  }	
}
@media (max-width: 1470px) 
{
	/* Auf UNTERSEITEN: Paddings zwischen den Menüpunkten senken: */
	#site-navigation .wide-container #menu-primary-items .menu-item:nth-Child(1) {  margin-right: 12px !important;  }
	#site-navigation .wide-container #menu-primary-items .menu-item,
	#site-navigation .wide-container #menu-primary-items .myAdditionalMenuText   {  padding: 10px 10px !important;  }
}
/* Bei 1400/1440 x 900/960/1050: */
@media (max-width: 1399px)/* --> ACHTUNG: WENN MAN DIESE ZAHL ÄNDERT DANN BITTE OBEN AUCH DIE GRENZE ÄNDERN AB DER DAS SITE-MENÜ ZUM TOP-MENÜ WIRD! */
{
	.site-content                         {  margin-top: -270px; 				  }
	.home .site-content                   {  margin-top:  -85px; 				  }
    .site-content .wide-container         {                      				  }
	.home .site-content .wide-container   {                      				  }
	.myHomepagePhotoMenu_CategoryContainer{  									  }	
}
/* Bei 1360/66/76 x 768: */
@media (max-width: 1299px)/* --> ACHTUNG: WENN MAN DIESE ZAHL ÄNDERT DANN BITTE OBEN AUCH DIE GRENZE ÄNDERN AB DER DAS SITE-MENÜ ZUM TOP-MENÜ WIRD! */
{
	.site-content                         {  margin-top: -270px; 				  }
	.home .site-content                   {  margin-top:  -85px; 				  }
    .site-content .wide-container         {                      				  }
	.home .site-content .wide-container   {                      				  }
	.myHomepagePhotoMenu_CategoryContainer{ 									  }	
}
/* Bei 1280 x 724/768/800/900/1024: */
@media (max-width: 1199px)/* --> ACHTUNG: WENN MAN DIESE ZAHL ÄNDERT DANN BITTE OBEN AUCH DIE GRENZE ÄNDERN AB DER DAS SITE-MENÜ ZUM TOP-MENÜ WIRD! */
{
	.site-content                         {  margin-top: -270px; 				  }
	.home .site-content                   {  margin-top: -135px; 				  }
    .site-content .wide-container         {                      				  }
	.home .site-content .wide-container   {                      				  }
	.myHomepagePhotoMenu_CategoryContainer{ 									  } 	
}

/* Bei 1024 x 576/600/768: */
@media (max-width: 1099px)
{
	.site-content                         {  margin-top: -270px; 				  }
	.home .site-content                   {  margin-top: -270px; 				  }
    .site-content .wide-container         {                      				  }
	.home .site-content .wide-container   {                      				  }
	.myHomepagePhotoMenu_CategoryContainer{										  }	
}
/* Bei 960 x 540/640/720: */
@media (max-width: 999px)
{
	.site-content                         {  margin-top: -270px; 				  }
	.home .site-content                   {  margin-top: -270px; 				  }
    .site-content .wide-container         {                      				  }
	.home .site-content .wide-container   {                        				  }
	.myHomepagePhotoMenu_CategoryContainer{ 									  }	
}

/* Bei 768 x .....: */
@media (max-width: 899px)
{
	.site-content                         {  margin-top: -270px;  				  }
	.home .site-content                   {  margin-top: -270px;  				  }
    .site-content .wide-container         {                       				  }
	.home .site-content .wide-container   {                       				  }
	.myHomepagePhotoMenu_CategoryContainer{  width: 50%           				  }	
}
@media (max-width: 800px)
{
	/* Da der Hauptbereich und die Sidebar bei dieser Grösse BEIDE jeweils die KOMPLETTE BREITE einnehmen: RandAbstand beider Elemente an beiden Seiten GLEICHMÄSSIG machen*/
	.site-content #primary   { margin:0px; padding-left:40px; padding-right:40px; }
	.site-content #secondary { margin:0px; padding-left:40px; padding-right:40px; } 
}
@media (max-width: 799px)
{
	.site-content                         {  margin-top: -270px; 				  }
	.home .site-content                   {  margin-top: -270px;  			 	  }
    .site-content .wide-container         {                      				  }
	.home .site-content .wide-container   {                      				  }
	.myHomepagePhotoMenu_CategoryContainer{  width: 50%           				  }
	
	/* Da der Hauptbereich und die Sidebar bei dieser Grösse BEIDE jeweils die KOMPLETTE BREITE einnehmen: RandAbstand beider Elemente an beiden Seiten GLEICHMÄSSIG machen*/
	.site-content #primary   { margin:0px; padding-left:40px; padding-right:40px; }
	.site-content #secondary { margin:0px; padding-left:40px; padding-right:40px; } 
	
	/* Paddings zwischen den Menüpunkten senken! */
	#site-navigation .wide-container #menu-primary-items .menu-item    {  padding: 10px 7px !important;  }	
}

@media (max-width: 768px) 
{	
	.site-content                         {  margin-top: -270px;  				   }
	.home .site-content                   {  margin-top: -270px;  				   }
    .site-content .wide-container         {                       				   }
	.home .site-content .wide-container   {                       				   }
	.myHomepagePhotoMenu_CategoryContainer{  width: 50%            				   }
	
	/* A: Wenn KEIN JAVASCRIPT AKTIVIERT ist (also GENERELL), dann Auch UNTERHALB von 768px das "NORMALE" TOP-MENÜ ANZEIGEN: */
	#page #site-navigation .wide-container{  display:block !important;   		   }
	#menu-primary-items                   {  display:block !important;   		   }	
	/* B: Wenn JS AKTIV ist: Das "NORMALE" TOP-MENÜ AUSBLENDEN, damit das vom Theme-Hersteller per JAVASCRIPT erstellte Smartphone-typische "SLICKNAV"-Menü zum Vorschein kommt: */
	.jsEnabledPage #page #site-navigation .wide-container{display:none !important; }
	.jsEnabledPage #menu-primary-items                   {display:none !important; }	
		
}

@media (max-width: 660px) 
{
	.site-content                         {  margin-top: -270px;   				   }
	.home .site-content                   {  margin-top: -270px;   				   }
    .site-content .wide-container         {                       				   }
	.home .site-content .wide-container   {                       				   }
	.myHomepagePhotoMenu_CategoryContainer{  width: 50%           			       }
	
	/* Sonstiges: */
	.archive .content-area .site-main article 
	{ 
		display:block !important; 
		width: 98%;
		margin: auto; 
	}
}

@media (max-width: 699px)
{
	.site-content                         {  margin-top: -270px;  					}
	.home .site-content                   {  margin-top: -270px;  					}
    .site-content .wide-container         {                       					}
	.home .site-content .wide-container   {                       					}
	.myHomepagePhotoMenu_CategoryContainer{  width: 50%           					}
}

@media (max-width: 599px)
{
	.site-content                         {  margin-top: -270px;  					}
	.home .site-content                   {  margin-top: -270px;  					}
    .site-content .wide-container         {  max-width: 100%; padding-top:15px;     }
	.home .site-content .wide-container   {                       					}
	.myHomepagePhotoMenu_CategoryContainer{  width: 50%           					}
	
	/* Sonstiges: */
	#masthead                             {  padding: 215px 0px;                     }
	.home #masthead                       {  padding: 205px 0px;                     }
	.site-branding                        {  top:43px                                }
	.home .site-branding                  {  top:25px                                }
	.home .categoryImage                  {  width:85%; min-height:90px;             }
	.site-content #primary                {  margin:0px; padding-left:25px; padding-right:25px; }
	.site-content #secondary              {  margin:0px; padding-left:25px; padding-right:25px; } 	
	.archive .site-content .page-header .page-title:before { display:block;          }
	#myHomepagePhotoMenu .categoryHeadline:before{ content:''; 					     } 
	#myHomepagePhotoMenu .categoryHeadline{ font-weight:normal; 					 } 
}
@media (max-width: 485px) 
{
	.site-content                         {  margin-top: -270px;  					 }
	.home .site-content                   {  margin-top: -270px;   					 }
    .site-content .wide-container         {  max-width: 100%;    padding-top:15px;   }
	.home .site-content .wide-container   {                       					 }
	.myHomepagePhotoMenu_CategoryContainer{  width: 50%           					 }
	
	/* Sonstiges: */
	#logo .site-title a      			  { padding:   5px 10px !important; 		 }
	#logo .site-title a span 			  { font-size: 32px !important;     		 }
}
@media (max-width: 499px)
{
	.site-content                         {  margin-top: -270px;  					 }
	.home .site-content                   {  margin-top: -270px;  					 }
    .site-content .wide-container         {  max-width: 100%;    padding-top:15px;   }
	.home .site-content .wide-container   {                       					 }
	.myHomepagePhotoMenu_CategoryContainer{  width: 50%            					 }
	
	/* Sonstiges: */
	#myHomepagePhotoMenu_IntroSentence    {  display:none;        					 }
	#myHomepagePhotoMenu .categoryHeadline{ /* font-size:26px;*/                     } 
}

@media (min-width: 240px) and (max-width: 1170px) 
{
	#site-navigation .wide-container      {	padding: 0px  0px !important;  }
	#content .wide-container              {	padding: 20px 0px !important;  }	
}

@media (max-width: 1350px) 
{
	/* Auf UNTERSEITEN: Menüpunkt-Schrift verkleinern: */
	#site-navigation .wide-container #menu-primary-items .menu-item a,
	#site-navigation .wide-container #menu-primary-items .myAdditionalMenuText span {  font-size:  18px !important;  }
}




/* TEXT-STYLINGS: */

.archive .post .entry-header .entry-title a:visited,
 .search .post .entry-header .entry-title a:visited,
   .home .post .entry-header .entry-title a:visited
{
	text-decoration: none;
    color: #454545;
}
.archive .post .entry-header .entry-title a:hover,
.archive .post .entry-header .entry-title a:visited:hover,
 .search .post .entry-header .entry-title a:hover,
 .search .post .entry-header .entry-title a:visited:hover,
   .home .post .entry-header .entry-title a:hover,
   .home .post .entry-header .entry-title a:visited:hover
{
	text-decoration: none;
    color: #b37800;
}
form input,
form textarea
{
	width:90% !important;
}