/*  @media (min-width: 1000px) {  
	@font-face{
	font-family:'overlockregular';
	src: url('/wp-content/themes/dorayakichildthemefolder/fonts/overlock-regular-webfont.woff') format('woff'), */ /* Pretty Modern Browsers */
	/*	url('/wp-content/themes/dorayakichildthemefolder/fonts/Overlock-Regular.ttf')  format('truetype'); *//* Safari, Android, iOS */
/*	;font-weight:normal;font-style:normal}
}
*/



	body{
	font-family:  'Overlock',  serif
	}	


/*body{font-family:  'arial', sans-serif} */

/* @media screen and (min-width: 1260px) {


img {
    -moz-box-shadow: 0px 8px 13px #7a7a7a;
    -webkit-box-shadow: 0px 8px 13px #7a7a7a;
    box-shadow: 0px 8px 13px #7a7a7a;
}


}
*/

/*##################################################################################################################*/
/*-----------------------------------grid layout ------------------*/

/* alte Browser, ur mobile */
header { display: block; width:100%}
#mainmenu { display: block;  width:100%}
article { display: block;  width:100%}
#sidebar-right { display: block; width:100% }
footer { display: block;  width:100%}

/*  Internet Explorer */
#nil0 			{ -ms-grid-column: 1;-ms-grid-column-span: 1;  -ms-grid-row: 1; -ms-grid-row-span: 1;}
header 			{ -ms-grid-column: 1;-ms-grid-column-span: 1;  -ms-grid-row: 2; -ms-grid-row-span: 1;}
#nil 			{ -ms-grid-column: 1;-ms-grid-column-span: 1;  -ms-grid-row: 3; -ms-grid-row-span: 1;}
##mainmenu	 	{ -ms-grid-column: 1;-ms-grid-column-span: 1;  -ms-grid-row: 4; -ms-grid-row-span: 1;}
article 		{ -ms-grid-column: 1;-ms-grid-column-span: 1;  -ms-grid-row: 5; -ms-grid-row-span: 1;}
#sidebar-right 	{ -ms-grid-column: 1;-ms-grid-column-span: 1;  -ms-grid-row: 6; -ms-grid-row-span: 1;}
footer 			{ -ms-grid-column: 1;-ms-grid-column-span: 1;  -ms-grid-row: 7; -ms-grid-row-span: 1;}


/*  moderne Browser */
#nil { grid-area: nil0 }
#nil { grid-area: nil }
#white1 { grid-area: white1;}
#white2 { grid-area: white2 }
#nil-left {grid-area: left;}
#nil-right {grid-area: right;}
header               { grid-area: header; } 
#mainmenu        { grid-area: mainmenu; }
article              { grid-area: article; }
#sidebar-right { grid-area: sidebar2; }
footer               { grid-area: footer; }




/*
	#grid-container {
		grid-template-areas:
		"nil0           "
		"header       "
		"nil            "
		"mainmenu   "
		"article  "
		"sidebar2  "
		"footer       ";
		
		
		display: grid;	display: -ms-grid;
        grid-template-rows: 10px 120px 20px 50px  auto auto auto;	-ms-grid-rows:  10px 120px 20px 50px auto auto auto;
		grid-template-columns: minmax(300px, 900px)  ;    -ms-grid-columns: minmax(300px, 900px); 
}
*/

@media only screen and (min-width: 810px)  {  

	#grid-container {
		grid-template-areas:
		"nil0   nil0      nil0        nil0"
		"white1 header    header      white2"
		"nil    nil       nil         nil"
		"left   mainmenu  mainmenu    right"
		"left   article   sidebar2    right"
		"left   footer    footer      right";
		
		
		
		display: grid;
        grid-template-rows: 10px 120px 20px 50px  auto auto;	-ms-grid-rows:  10px 120px 20px 50px  auto auto;
		grid-template-columns: auto minmax(600px, 900px) minmax(200px, 250px) auto;    -ms-grid-columns: minmax(0px, 200px) minmax(600px, 900px) minmax(200px, 250px) minmax(0px, 200px); 
        
    }
		#nil0 			{ -ms-grid-column: 1;-ms-grid-column-span: 4;  -ms-grid-row: 1; -ms-grid-row-span: 1;}
		header 			{ -ms-grid-column: 2;-ms-grid-column-span: 2;  -ms-grid-row: 2; -ms-grid-row-span: 1;}
		#nil 			{ -ms-grid-column: 1;-ms-grid-column-span: 4;  -ms-grid-row: 3; -ms-grid-row-span: 1;}
		#mainmenu 		{ -ms-grid-column: 2;-ms-grid-column-span: 2;  -ms-grid-row: 4; -ms-grid-row-span: 1;}
		article 		{ -ms-grid-column: 2;-ms-grid-column-span: 1;  -ms-grid-row: 5; -ms-grid-row-span: 1;}
		#sidebar-right 	{ -ms-grid-column: 3;-ms-grid-column-span: 1;  -ms-grid-row: 5; -ms-grid-row-span: 1;}
		footer 			{ -ms-grid-column: 2;-ms-grid-column-span: 2;  -ms-grid-row: 6; -ms-grid-row-span: 1;}

		#white1 		{ -ms-grid-column: 1;-ms-grid-column-span: 1;  -ms-grid-row: 5; -ms-grid-row-span: 2;}
		#white2 		{ -ms-grid-column: 4;-ms-grid-column-span: 1;  -ms-grid-row: 5; -ms-grid-row-span: 2;}

	

#article {    /* ??????? */
	max-width: 968px;
margin: 0 auto;
}

} /* @media only screen and (min-width: 810px) */

	/*#####################################################################################################*/
*{ -webkit-box-sizing: border-box;   -moz-box-sizing: border-box;   box-sizing: border-box}
html,body,div,span,h1,h2,h3,h4,h5,h6,p,a,em,img,q,s,small,strike,strong,sub,sup,b,u,i,center,ol,ul,li,article,aside,footer,header,menu,nav,section /* table,caption,tbody,tfoot,thead,tr,th,td, */
{  margin: 0;
  padding: 0;
  border: 0;
 
  vertical-align: baseline;
	text-decoration:none;
}


body{
	hyphens:auto;
-webkit-hyphens: auto;
-webkit-hyphenate-limit-chars: auto 3;
-webkit-hyphenate-limit-lines: 4;
-ms-hyphens: auto;
-ms-hyphenate-limit-chars: auto 3;
-ms-hyphenate-limit-lines: 4;	
-moz-user-select: none;

margin: 0 auto;
color: #3f3f3f;
background: #f4f4f4}




/*  evtl. doch, dann eher 
#main-wrap{
	margin: 0px auto 0px;
	padding-top: 10px;
padding-bottom: 50px;
background-color: #FFF;
-webkit-box-shadow: 2px 5px 10px #a3a3a3;
-moz-box-shadow: 2px 5px 10px #a3a3a3;
box-shadow: 2px 5px 10px #a3a3a3}


#main-wrap { padding-top: 0px !important; } */ /* schiebt das Menu ein paar Pixel nach oben, bündig */
/*    #site-content {   padding-top: 60px !important } */   /* damit der Seiteninhalt nicht vom Menu verdeckt wird */

article, aside, footer, #white1, #white2 {
	background-color: white
}





/* ##########################################################################################################*/
/*------------------------------------------- der Header ---------------------------------------------*/
#masthead{        /* ???????????????????????????????????????? evtl.besser header  */
/*	position: relative;
	display: block;                                */
	background: #fff;
	border-top: 5px solid  #9fca08;
}

	

#site-title {  
    padding: 20px 10px 20px 10px;
/*    border-top: medium none !important;
    float: left;
    text-align: left;
	background-image:none;
	width:100%
*/	
}

#site-title a:hover {
    color: #191919;
}

#header-container {
	display: flex; /* or inline-flex */
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
 }


#header-links-container {
	display: flex; /* or inline-flex */
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
 }

#header-logo {  	width:47px; }


#header-logo-img { width: 43px; height: 43px; box-shadow:none;  }

#header-text {   	flex-shrink: 1}
	#header-text #hd-normal { display:none }
	#header-text #hd-verysmall { display:block }

#header-rechts {  flex-shrink: 0;	padding-top:5px;   }
	#header-rechts #hd-verysmall { display:inline }
	#header-rechts #hd-small { display:none }
	#header-rechts #hd-normal { display:none }
	


@media screen and (min-width: 481px ) {
	#header-text .hd-normal 		{ display: inline }
	#header-text .hd-verysmall 		{ display: none }
	#header-rechts .hd-small 		{ display: inline }
		#header-rechts .hd-verysmall{ display: none }
	#header-logo 					{ width:68px;  }
	#header-logo-img 				{ width: 60px; height: 60px }
	
}

/*@media screen and (min-width: 481px ) {
	
	#header-logo-img { width: 65px; height: 65px }
	.header-logo {  	width:70px;  }
}  */
@media screen and (min-width: 681px) {
	#header-rechts .hd-small 	{ display: none }
	#header-rechts #.hd-normal 	{ display:inline }
	#header-rechts 				{ flex-basis: 200px;  flex-shrink: 0 ;   }
	#header-logo 				{ width:90px; }
	#header-logo-img 			{ width: 70px; height: 70px; box-shadow:none;  }
}

/* bei 475px Fensterbreite springt das Suchfeld nach unten */
/* @media screen and (max-width: 475px) {
	#site-title {
		width:100% !important;  /* bewirkt, dass das Suchfeld unter den site-title rutscht*/
		padding-bottom: 0px;
	}
}
*/

/* Schrift noch variieren */
#ht1 	{ font-size: 1.1em }
#ht2 	{ font-size: 1.3em }
#ht3 	{ font-size: 1em }
#htvs1 	{ font-size: 1em }
#htvs2 	{ font-size: 1.2em }



/*########################################################################################################*/
/* ########################################Main Menu################################################*/
/*  FARBEN   */
/*  background: white;                       */
/*	background: #9fca08;  dunkleres Grün */
/*  background: #19c589;                  */
/*  background:  #b6e026  helleres Grün   */
/*  background: #abdc28                          */
/*    color: #fff;    Schriftfarbe weiß */
/*	color: #3f3f3f;    Schriftfarbe HOVER   */
/*   rgb(51,51,51)   fast Schwarz   */
/*    #f6f7f4   sehr helles Grau */

#mainmenu {
	background: #9fca08; /* damit das Menu auf der ganzen breite grün ist*/
}
/* 1. Ebene des Menus*/
#mainmenu ul {
    list-style-type:none;
    margin:0;
    padding:0;
    position: absolute;
	background: #9fca08; /* dunkleres Grün */
	overflow: visible;  /* wichtig */
	z-index: 9;
}
/*Create a horizontal list with spacing*/
#mainmenu li {
    display:inline-block;
    float: left;}

/*Style for menu links*/
#mainmenu li a {
    display:block;
    min-width:140px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    color: rgb(51,51,51);   /* Schrift fast Schwarz */
    text-decoration: none;
	font-weight: 600;
	font-size: 115%
}

/* HOVER der 1. MenuEbene  */
/* Veränderungen auf der ersten Menuebene */
#mainmenu li:hover a {
	color: #3f3f3f;     /* Schriftfarbe HOVER   */
	background: #b6e026;  
}
/* Veränderungen auf der 2. Menuebene */
/*Style for dropdown links*/
#mainmenu li:hover ul a {
    background: white;
    color: #3f3f3f;
    height: 40px;
    line-height: 40px;
}
/*Display the dropdown on hover der 1. Ebene */
#mainmenu ul li a:hover + .sub-menu { /* .sub-menu:hover {   */
    display: block;
}

/*beim Übergang auf das Submenu wird das Submenu weiter dargestellt */
#mainmenu  .sub-menu:hover { /*  + .sub-menu, .sub-menu:hover {   */
    display: block;
}
#mainmenu  .sub-menu a:hover {
	background-color: #b6e026;
}



/*Style 'show menu' label button and hide it by default*/
.show-menu {
    
    text-decoration: none;
	font-size:1.6em;
	font-weight:600;
    color: #fff;
    background: #9fca08;
    text-align: center;
    padding: 10px 0;
    display: none;
}

/*Responsive Styles*/
@media screen and (max-width : 779px){
    /*Make dropdown links appear inline*/
    #mainmenu ul {
    /*    position: static;    */
		z-index: 9;
        display: none;
    }
    /*Create vertical spacing*/
    #mainmenu li {
        margin-bottom: 1px;
    }
    /*Make all menu links full width*/
    #mainmenu ul li, li a {
        width: 100%;
    }
    /*Display 'show menu' link*/
    .show-menu {
        display:block;
    }
	/* keine Submenus in der mobilen Ansicht */
	#mainmenu ul li li{  display:none;   }	 
} /*-----------------------------------------------------------------------------------------------------*/

/* Umschalten dro vertikales zu horizontales Menus */
@media screen and (min-width: 780px){
	#mainmenu li {
		background: #9fca08;   /* dunkleres Grün */
	}
	#mainmenu li a {
  		background: #9fca08;   /* dunkleres Grün */
		color: rgb(51,51,51);   /* Schrift fast Schwarz */
	}
/* -------------------- 2. MenuEbene---------------------- */
/*Hide dropdown links until they are needed*/
	#mainmenu .sub-menu {
	    display: none; 
		border: grey solid 1px;
		border-top:grey solid 0px; 
		background: white;  
	}
/*Make dropdown links vertical*/
	#mainmenu li li {
	    display: block;
	    float: none;
		/* border: red 1px solid;  */
	}
	/*Prevent text wrapping*/
	#mainmenu li li a {
	    width: auto;
	    min-width: 100px;
	    padding: 0 20px;
		/*	border-bottom: #f6f7f4 solid 1px;  */
	}
	#mainmenu li ul{
		width:auto
	}
	

	/*  Hover states  */


	#mainmenu li li:hover a {
	    background: #f3f3f3;
	    color: #3f3f3f;
	    height: 40px;
	    line-height: 40px;
	}

	/*Hover state for dropdown links*/
	#mainmenu li:hover ul a:hover; #mainmenu li:focus-within ul a:focus;  {
	    background: #19c589;
	    color: #3f3f3f;
	}
}


/* ########################################################################## */

/*Hide checkbox*/
input[type=checkbox]{
    display: none;
}
/*Show menu, also das ul,  when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
    display: block;
}
/* ########################################################################## */
article {
	padding: 1em 1em;
	
}
/* ##################################     Sidebar      #######################################*/


/* Farben */
/* orange hell:   #ffc942
	orange dunkler: #ffa542
*/


.sidebar-item, .sidebar-menu-item {
	min-width: 175px;
	max-width:350px;
	flex-grow:1;
	padding: 0em 1em 1em 0em;
}	
.sidebar-menu-item ul{ 
	/*  wie ein Menu-Punkt, vielleicht hier in Orange?? */
/*	list-style-type:none;
    margin:0;
    
    position: absolute;  */
	background: #ffc942; /* dunkleres orange */
	padding:0;
	border-radius: 0.1rem;
/*	overflow: visible;  
	z-index: 9;   */
}
.sidebar-menu-item li{ 
	/*  wie ein Menu-Punkt, vielleicht hier in Orange?? */
	 display:inline-block;
	color: #3f3f3f;
 /*   float: left;   */
	padding:0.3rem 0.8rem;
		width:100% /* damit beim hover die anze Fläche die Farbe verändert */
}
.sidebar-menu-item a{ color: #333;  display:inline-block;  width:100%; font-weight: 500;}  /* damit der Link auch gültig ist, wenn nicht dirakt über dem Text gehovert wird */
.sidebar-menu-item li:hover a{ 
	/*  wie ein Menu-Punkt, vielleicht hier in Orange?? */
	color: #fff;     /* Schriftfarbe HOVER   */
	/*background: #fdcd79;   */
}


aside ul {
	padding-left: 20px; 
	margin: 0;
}
aside p {
	hyphens: auto;
	line-height: 1.3rem;
	margin-bottom: 0.5em;
}

aside h2 {
	font-size: 1em;
}

aside h3 {
	font-size: 1.2em;
	font-weight: 500;

	margin: 0rem 0 0.25rem 0;
}
aside hr { width: 90%;

	border: 1px solid #b6e026; }

#sidebar-right {
	padding: 2em 1em 2em 1em;
	margin-left: 0.15em;
	
	 display: flex;
	display: -ms-flexbox;
	
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between; /* flex-start | flex-end | center | space-between | space-around | space-evenly;  */
	align-items: stretch;  /*stretch | flex-start | flex-end | center | baseline;*/
	align-content: flex-start ;  /*flex-start | flex-end | center | space-between | space-around | stretch; */
}




/*############################################################################################################################*/
/*----------------------------------------------- Schriften und Überschriften Links ---------------------------------------*/



p{	padding-left: 0px; 
	font-size: 1.15rem; /*!important;  ????  */
	color: #191919;
	font-weight: normal;
	text-decoration: none;
	line-height: 1.7rem;
	margin-bottom: 0.5em; /*   ???????????????????????????? */
	/*hyphens: auto;*/
}

a:link::before,a:visited::before{
	color: #9fca08;
	display: block;
	text-transform: uppercase;
	margin-bottom: 5px;
	word-wrap: break-word
}
a {color: #9fca08;}
a:hover{  color: #b6e026}

a:active{  color: #b6e026 /* !important   ??? */  }

ul{  list-style: disc}

ul,ol{  
	margin: 0 0 24px 0;
	padding-left: 30px;
	overflow: auto
}
li { 
	font-size:1.15rem;
	color: #191919;
    font-weight: normal;
    
    line-height: 1.7rem;
}

li > ul,li > ol{
	margin-bottom: 0;
	margin-left: 24px
}

/*-------------------------------------------- Überschriften------------------------------*/
h1, h2, h3, h4, h5, h6 {
		color: #333333;
	font-weight: 400;
	text-rendering: optimizeLegibility;
	word-wrap: break-word;
}
h1 {
/*	font-size: 1.813rem;*/
	margin-top: 0.75em;
	line-height: 110%;
	font-weight: 600;
	font-size: 1.9rem;
	
}
h2{   
	font-size: 1.65rem;
 	margin: 0.25rem 0 0.25rem 0;
 	font-weight:600
}
h3{
	font-size:1.4rem;
	font-weight: 600;
	margin: 1.25rem 0 0.25rem 0
}


/*
@media screen and (max-width: 767px) {

h1 {
	margin: 1em 0 1em;
	font-size:20px;
	font-size:1.25rem;
}
h2 {
	font-size: 18px;
	font-size: 1.125rem;
	margin-top: 0.5em;
	margin-right: 0;
	margin-bottom: 0.7em;
	margin-left: 0;
}
h3 {
	font-size: 16px;
	font-size: 1rem;
	margin-top: 1.1em;
	margin-right: 0;
	margin-bottom: 0.7em;
	margin-left: 0;
}


} */                  /*@media screen and (max-width: 767px)*/


<!-- -------------------------------------------------------------------- -->
<!-- ------------------  Boxen etc  ------------------------------ -->
<!-- -------------------------------------------------------------------- -->

hr{
	border-top-width: thin;
	border-top-style: double;
	border-top-color: #9fca08;
	margin-top: 20px;
}



/*ein und ausblenden, je nach Bildschirm */
.screen-only{display: block;}
.mobile-only{display: none;}
@media screen and (max-width: 480px){
.screen-only{ display: none; }
.mobile-only{display: block;}
}

/* kein Umbruch */
.nobr {white-space: nowrap;}


/*......................................................................................................................*/
/*   infoboxen   */
@media only screen and (max-width:600px){
.infoboxrechts, .infoboxlinks{ display:none}
}
.infoxoxrechts ul li, .infoboxlinks ul li{ font-size:0,875rem}
.infoboxrechts {
	border-left: 1px solid #e4e1e1;
	margin-left: 3rem;
	padding-left: 1rem;
	float: right;
	width: 15rem;
}
.infoboxlinks {
	border-right: 1px solid #e4e1e1;
	margin-right: 3rem;
	padding-right: 1rem;
	float: left;
	width: 15rem;
}

/*......................................................................................................................*/
/*   fliesstext  ann jedes ddiv sein */
.fliesstext2 {
	-webkit-column-count: 2;
	-moz-column-count: 2;
	column-count: 2;
}
.fliesstext3 {
	-webkit-column-count: 3;
	-moz-column-count: 3;
	column-count: 3;
}
.fliesstext2, .fliesstext3 {
	width: 100%;
	-webkit-column-rule: 1px solid black;	-moz-column-rule: 1px solid black;	column-rule: 1px solid black;
	-moz-column-fill: balance;	column-fill: balance;
	-webkit-column-gap: 20px;	-moz-column-gap: 20px;	column-gap: 20px;
}
.fliesstext2 h2,.fliesstext3 h2,.fliestext2 h3,.fliesstext3 h3 {
	-webkit-column-span: all; 	-moz-column-span: all;	column-span: all;
	-webkit-column-break-after: column;	-moz-column-break-after: column; 	column-break-after: column;
}

/*...................................................................................................................
#kontakttrio ist der flexbox-container, für das Kontakttrio. Bisher als: .teaser . rows3

.teaser ist ein flexbox-container, ohne rand

.panel ist ein flexbox-container, wie veraltet mywidgetbox;  .panel hat einen Rand.

??? gbt es .panelbox ??

..................................................................................................................*/

.noborderbox{ padding:10px; margin:5px; }
.rows1,.rows2,.rows3 {
	flex: 1; -ms-flex: 1; 
	flex-grow:1; 
}
.rows1	{  width: 94%;  flex-basis: 94%;	} 
.rows2	{  width: 46%; 	
	min-width: 200px; 	max-width:700px;
} 
.rows3 	{  width: 31%;
	min-width: 200px; 	max-width:700px;
		}  
.rows4 	{  width: 23%; 	flex-basis: 23%; 	} 


/*---------------------------   teaser  --------------------------*/



.teaser:hover {         opacity: .9;  }
.teaser h2 {  margin-top:0.1em!important;  text-align: center!important; }
.teaser h3  { font-weight:600 !important; margin-top:0.1em !important;  text-align: center !important; }

/* veraltet  ???  
@media only screen and (max-width:600px){
/* auf mobilen Schirmen keine Flexbox */

.teaser p{ -moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto; 
}
}
*/





.myBoxWidgetNoBorder {    display: table; border-collapse: seperate; border-spacing: 20px;  table-layout: fixed;
width: 100% }
.myBoxWidgetCellNoBorder { margin-left: 0px; border: none; padding: 0px 15px 0px 15px; display: table-cell; width: 30%; }

/*
.myBoxWidget {    display: table; border-collapse: seperate; border-spacing: 20px;  table-layout: fixed;
width: 100% }
.myBoxWidgetCell { margin-left: 0px; border: 1px solid #D3D3D3; border-radius: 5px; padding: 10px 20px 10px 20px; display: table-cell; width: 30%; 
box-shadow: 0 15px 10px #e9e9e9;     }
*/
/* panel ist aktuell, myWidgetbox ist veraltet */
.panel, .panel1, .panel2, .panel3, .panel4, .myBoxWidget, .teaser1, .teaser2, .teaser3, .teaser4, .teaser-container  {
	padding: 0.5em 0.5em 0.5em 0.5em;
	/*background: #b6e026;*/
	
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between; /* flex-start | flex-end | center | space-between | space-around | space-evenly;  */
	align-items: stretch;  /*stretch | flex-start | flex-end | center | baseline;*/
	align-content: flex-start ;  /*flex-start | flex-end | center | space-between | space-around | stretch; */ }

.panel div, .panel1 div, .panel2 div, .panel3 div, .panel4 div, .myBoxWidgetCell , .teaser1 div, .teaser2 div, .teaser3 div, .teaser4 div   { 
	padding: 1em; 
	margin:1em;
	flex: 1; -ms-flex: 1; 
	flex-grow:1;
}
.teaser1 div, .teaser2 div, .teaser3 div, .teaser4 div   {
border: none;	
}
.panel div, .panel1 div, .panel2 div, .panel3 div, .panel4 div, .myBoxWidgetCell   { 
border: 1px solid #D3D3D3; border-radius: 5px;
}

.panel1 div, .teaser1 div {	min-width: 300px; 	max-width:700px; }
.panel2 div, .panel div, .teaser2 div {	min-width: 270px; 	max-width:700px; }
.panel3 div, .teaser3 div {	min-width: 233px; 	max-width:600px; }
.panel4 div, .teaser4 div {	min-width: 150px; 	max-width:700px; }

/* h2 sollt im panel selten verwendet werden */
.panel h2, .panel1 h2,.panel2 h2,.panel3 h2,.panel4 h2,.myBoxWidgetCell h2,.panelBox h2  {font-weight: 600; margin-top: 0; margin-bottom: 0; padding-top:0px}
.panel h3, .panel1 h3, .panel2 h3, .panel3 h3, .panel4 h3, .myBoxWidgetCell h2 {font-size:1.4rem; font-weight: 550; margin-top: 0; margin-bottom: 0; padding-top:0px}
.panel p, .panel1 p, .panel2 p, .panel3 p, .panel4 p, .myBoxWidgetCell p {  font-size: 110% }

.panel div img, .panel1 div img, .panel2 div img, .panel3 div img, .panel4 div img, .myBoxWidgetCell img, .teaser img  {
	padding: 0.5em	
}
.panelBox {width: auto; margin-left: 0px; border: 1px solid #D3D3D3; border-radius: 5px; padding: 10px 20px 10px 20px; box-shadow: 0 15px 10px #e9e9e9;  display: flex;  }


.hcenter h2,.hcenter h3, .hcenter h4  { text-align:center }
.panel-center div, .teaser-center div, .img-center { justify-content: center;}
.img-center { display:flex;}
/* -------------------------bgbox  ------------------------------------------------*/
/* bei 100 Duchläufen war nth-of-type etwa gleichschnell wie die direkte Identifikation per .class (eher etwas schneller??)  */
@media only screen and (max-width:480px){
.notOnSmallScreen { display: none }
.nav-fixed{ position:fixed; z-index:99; }
}

.bgbox { /*display: block; position: relative;  */ overflow: hidden; padding: 1rem 0 ; border: none; }

.bgbox:nth-of-type( even ) { background: #fef7dd; }    
.bgbox:nth-of-type( odd ) {    background-color: white; }
.bgboxcolor {	background-color: #fef7dd; }
#bgbox100, .bgbox100{     background-color: #fef7dd; }
#bgbox100 h2, .bgbox100 h1 { text-align: center; margin-top: 40px !important; margin-bottom: 40px; }
#bgbox100 .bgboxkontakt, .bgbox100 .nehmensiekontaktauf{ text-align: center; font-weight: 600; }
.bgbox h1, .bgboxinteresse   { text-align: center; margin-bottom: 1.8rem;  line-height: 110%; font-weight: 600; font-size: 2rem; }
.bgbox:first-of-type  h2  { text-align:center;  color: orange;   margin-bottom: 1,25rem;  } 
.bgbox:first-of-type  .kontakt h2  {   color: #333333;  } 
 .bgbox:first-of-type h2 a   { color: orange !important ; background:white; font-weight: 500 !important; }     
/*  .bgbox:first-of-type a:hover   { color: #9fca08 !important ; }                                      */
.bgbox h2   {margin-top:0.1em!important; margin-bottom:0.8em!important; } 
/*  #bgbox1 h2, .bgbox1 h2{ text-align:center;   }    */
/*^^^^^^^^^^^^^^^^^^^^^ bgbox  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/

border-width: none;
border-style: solid; 
}



a.clickablediv {
 
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-decoration: none;
    /* Makes sure the link doesn't get underlined */
    z-index: 10;
    /* raises anchor tag above everything else in div */
    background-color: white;
    /*workaround to make clickable in IE */
    opacity: 0;
    /*workaround to make clickable in IE */
    filter: alpha(opacity=0);
    /*workaround to make clickable in IE */
}


.divider{ 
	border: none !important;
	border-top-width: 1px  !important;
	border-top-style:solid  !important;
	border-top-color: #9fca08;
	color: #9fca08;
	height: 1px  !important;
	padding-top: 0px;
 }

/* Hover:  http://ianlunn.github.io/Hover/ */
/* Grow Shadow */
.hvr-grow-shadow {
  /*display: inline-block;
  vertical-align: middle; */
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
/*  box-shadow: 0 0 1px transparent; */
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow, transform;
  transition-property: box-shadow, transform;
}
.hvr-grow-shadow:hover, .hvr-grow-shadow:focus, .hvr-grow-shadow:active {
  box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

/* Float Shadow */
.hvr-float-shadow {
 /* display: inline-block;
  vertical-align: middle; */
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
 /* box-shadow: 0 0 1px transparent; */
  position: relative;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-float-shadow:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  top: 100%;
  left: 5%;
  height: 10px;
  width: 90%;
  opacity: 0;
  background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, transparent 80%);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, transparent 80%);
  /* W3C */
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform, opacity;
  transition-property: transform, opacity;
}
.hvr-float-shadow:hover, .hvr-float-shadow:focus, .hvr-float-shadow:active {
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
  /* move the element up by 5px */
}
.hvr-float-shadow:hover:before, .hvr-float-shadow:focus:before, .hvr-float-shadow:active:before {
  opacity: 1;
  -webkit-transform: translateY(5px);
  transform: translateY(5px);
  /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */
}

/* Fade */
.hvr-fade {
 /* display: inline-block;
  vertical-align: middle;  */
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  overflow: hidden;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: color, background-color;
  transition-property: color, background-color;
}
.hvr-fade:hover, .hvr-fade:focus, .hvr-fade:active {
  background-color: #2098D1;
  color: white;
}






.trennen {-ms-hyphens: manual;
        -moz-hyphens: manual;
        -webkit-hyphens: manual;
        hyphens: manual;
}
@media screen and (max-width: 480px) {
.trennen {-ms-hyphens: auto;
        -moz-hyphens: auto;
        -webkit-hyphens: auto;
        hyphens: auto;
}
}




#searchform {padding-top: 4px; padding-bottom: 4px; }
#s { border-radius: 3px; }
.searchbox{ padding-top: 20px; float:right; }
@media screen and (max-width: 580px) {
.searchbox{ width: 130px }
}
@media screen and (max-width: 475px) {
.searchbox{ padding-top: 0px;  }
}
.searchlabel{ font-size:1.17rem; font-weight:600; }
.searchfield{}
@media screen and (max-width: 780px) {
.searchlabel{ display: none;  }
}








img {
max-width: 100%;
height: auto;
}

.wp-caption-text { font-size:0.8rem; line-height:0.8rem;}


.alignleft {
	display: inline;
	float: left;
}

.alignright {
	display: inline;
	float: right;
}

.aligncenter {
	display: block;
	margin-right: auto;
	margin-left: auto;
}

/*
.kontakt { font-size: 100%;   font-family: 'Open Sans', sans-serif !important;  }
.kontakt p { margin-bottom: 0px; }
.kontakt {
float:left; width: 45%; max-width: 500px}
.kontakt {padding:10px; margin:5px; border-color: green;
@media only screen and (max-width:600px){
.kontakt {float:none; width: 90%; margin: 0 auto}
}
*/

/* kontakt das ist ein panel ohne Rand, mit 3 Spalten bei voller Breite */
.kontakt {	
	padding: 0.5em 1em 0.5em 1em;
	
	
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between; /* flex-start | flex-end | center | space-between | space-around | space-evenly;  */
	align-items: stretch;  /*stretch | flex-start | flex-end | center | baseline;*/
	align-content: flex-start ;  /*flex-start | flex-end | center | space-between | space-around | stretch; */
	
}

.kontakt div {
	min-width: 233px;
	max-width:600px;
	padding: 1em;
	
	flex: 1; -ms-flex: 1; 
	flex-grow:1;
}	

.zusammenfassung {
	display: flex;
  align-items: center;
  justify-content: center;
}
.zusammenfassung div { width:85%;}
.zusammenfassung p{ font-weight:600;}
	
/*-----------------------------------------------------------    -----------
   https://stackoverflow.com/questions/796087/make-a-div-into-a-link
<div> <a href=''><span class="clickdiv"></span></a>
*/


/* fixes overlap error in IE7/8,        make sure you have an empty gif */
/*  background-image: url('/wp-content/themes/dorayakichildthemefolder/empty.gif');                    background-image: url('data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=)
 */
/*
.clickdiv { 
  position:absolute; 
  width:100%;
  height:100%;
  top:0;
  left: 0;
  z-index: 1;
	background-image: url('data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=');
}
*/