/*
Theme-Name: HelfendeHände
*/

/* source-sans-3-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/source-sans-3-v15-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-sans-3-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 400;
  src: url('./fonts/source-sans-3-v15-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-sans-3-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  src: url('./fonts/source-sans-3-v15-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-sans-3-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 700;
  src: url('./fonts/source-sans-3-v15-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}



/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
	margin: 0;
	padding: 0;
	list-style: none;
}
.sf-menu li {
	position: relative;
}
.sf-menu ul {
	position: absolute;
	display: none;
	top: 100%;
	left: 0;
	z-index: 99;
}
.sf-menu > li {
	float: left;
}
.sf-menu li:hover > ul,
.sf-menu li.sfHover > ul {
	display: block;
}

.sf-menu a {
	display: block;
	position: relative;
}
.sf-menu ul ul {
	top: 0;
	left: 100%;
}

.csc-textpic-imagewrap { padding: 0 20px }

#menu-footer-menu  { margin: 0; padding: 0 }
#menu-footer-menu li { display: inline-block; margin-right: 10px;   }

body.freeze { overflow: hidden; 
    position: fixed; }

#mobileMenu { -webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out; }

/*** DEMO SKIN ***/
.sf-menu {
	float: left;
	margin-bottom: 1em;
}
.sf-menu ul {
	box-shadow: 2px 2px 6px rgba(0,0,0,.2);
	min-width: 12em; /* allow long menu items to determine submenu width */
	*width: 12em; /* no auto sub width for IE7, see white-space comment below */
}
.sf-menu a {
	border-left: 1px solid #fff;
	border-top: 1px solid #dFeEFF; /* fallback colour must use full shorthand */
	border-top: 1px solid rgba(255,255,255,.5);
	padding: .75em 1em;
	text-decoration: none;
	zoom: 1; /* IE7 */
}
.sf-menu a {
	color: #13a;
}
.sf-menu li {
	background: #BDD2FF;
	white-space: nowrap; /* no need for Supersubs plugin */
	*white-space: normal; /* ...unless you support IE7 (let it wrap) */
	-webkit-transition: background .2s;
	transition: background .2s;
}
.sf-menu ul li {
	background: #AABDE6;
}
.sf-menu ul ul li {
	background: #9AAEDB;
}
.sf-menu li:hover,
.sf-menu li.sfHover {
	background: #CFDEFF;
	/* only transition out, not in */
	-webkit-transition: none;
	transition: none;
}

/*** arrows (for all except IE7) **/
.sf-arrows .sf-with-ul {
	padding-right: 2.5em;
	*padding-right: 1em; /* no CSS arrows for IE7 (lack pseudo-elements) */
}
/* styling for both css and generated arrows */
.sf-arrows .sf-with-ul:after {
	/*content: '';
	position: absolute;
	top: 50%;
	right: 1em;
	margin-top: -3px;
	height: 0;
	width: 0;
	/* order of following 3 rules important for fallbacks to work *!/
	border: 5px solid transparent;
	border-top-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) *!/
	border-top-color: rgba(255,255,255,.5);*/
}
.sf-arrows > li > .sf-with-ul:focus:after,
.sf-arrows > li:hover > .sf-with-ul:after,
.sf-arrows > .sfHover > .sf-with-ul:after {
	border-top-color: white; /* IE8 fallback colour */
}
/* styling for right-facing arrows */
.sf-arrows ul .sf-with-ul:after {
	margin-top: -5px;
	margin-right: -3px;
	border-color: transparent;
	border-left-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */
	border-left-color: rgba(255,255,255,.5);
}
.sf-arrows ul li > .sf-with-ul:focus:after,
.sf-arrows ul li:hover > .sf-with-ul:after,
.sf-arrows ul .sfHover > .sf-with-ul:after {
	border-left-color: white;
}

	
	.teaserwrap h3,
	#sidebarwrapper ul li a:hover,
	#contentwrapper h2,
	.opener,
	#contentwrapper p a,
	#sidebarwrapper .csc-textpic-text p a 
	{ color: #ff590e; }

	
	#sidebarwrapper ul li a { background: url("img/nav/subnav-light-base.png") left center no-repeat; color: #333;	}
	#sidebarwrapper ul li a:hover { background: url("img/nav/subnav-light.png") left center no-repeat;	}
	
	#kontaktbutton a {
		background: #ff590e url("img/nav/kontakt-flag.png") no-repeat bottom left;
	}
	
	#kontaktbutton a:hover {
		background: #ffa10e url("img/nav/kontakt-flag.png") no-repeat bottom left;
	}
	
	#bodywrap { 
		background: #f7f6f6 url("img/fond/bodyfond.jpg") repeat-x; 
		}
	
	.nav li a:hover, .nav li a.active, #helfendehaende-2 li#n_4 a, .nav li.sfHover a, .mainmenuClass li.current_page_item a, .mainmenuClass li.current_page_ancestor a { border-top: 5px solid #ff590e !important; background: none; }
	.nav li ul a:hover, .nav li ul a.active { border-top: 0px solid #F90 !important; background: none; color: #ff590e; }
	.nav li.sfHover ul li a {
		border-top: 0px solid #F90 !important; background: none;
	}
/*	
	.stagerow {
		background: url("img/stage/stage-placeholder.jpg") top left no-repeat;
	}*/
	
	
	
	
	body.helfendeHaendeView { 
		background: #ebe9b2;	
		padding: 0px;
		margin: 0px;
		overflow-y:  scroll;
		}
	
	#headerwrap {
		height: 450px;
	}
	
	.centerpage {
		width: 970px;
		margin: 0px auto;
	}
	
	.logocol { width: 275px; height: 350px; float: left;	}
	.logocol img { max-width: 100%; height: auto }
	.stagerow {
		height: 450px;
		width: 695px;
		float: left;
		background-position: top left;
		background-repeat: no-repeat;
	}
	
	.logocol { position: relative }
	.logocol a { position: absolute; top: 0; left: 0; width: 100%; height: 100% }
	
	.phonebox { background: #FFF; width: 695px; height: 47px; text-align: right; 	}
		.telefon { padding: 10px; display: inline-block; font-size: 18px; }
	
	/* COOKIEBAR.start */
	#cookiebar { font: 1em/1.5em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; display: none; position: fixed; bottom: 0; left: 0; width: 100%; background: rgba(255, 255, 255, .95); color: #fff; z-index: 999999; -webkit-box-shadow: 0 0 50px 10px rgba(0,0,0,0.2);box-shadow: 0 0 50px 10px rgba(0,0,0,0.2);}
	#cookiebar p { color: #666; font-size: .9em; line-height: 1.4em }
	#cookiebar.hidecookiebar { display: none; }
	#cookiebar.showCookieBar { display: block; }
	#cookiebar p a { color: #666; font-weight: bold; text-decoration: none; border-bottom: 1px solid #333; }
	#cookiebarinner { padding: 30px 300px 30px 50px; }
	#acceptcookie { position: absolute; right: 50px; top: 50%; line-height: 50px; height: 50px; margin-top: -25px; background: #ff590e; display: inline-block; padding: 0 30px; color: #fff; text-decoration: none; }
	@media screen and (max-width: 800px) { #cookiebarinner { padding: 30px 30px 100px 30px; } #acceptcookie { top: auto; bottom: 30px; margin: 0; } }
	@media screen and (max-width: 600px) { #cookiebarinner p { font-size: .8em; } #acceptcookie { right: auto; left: 30px !important; line-height: 40px; height: 40px; padding: 0 20px; font-size: .9em; } }
	@media screen and (max-width: 400px) { #cookiebarinner { padding: 15px 30px 90px 30px; } }
	#optoutbox { position: fixed; z-index: 9999; top: 50px; left: 50%; width: 250px; 	margin-left: -125px; background: #fff; border: 0px solid #bacb29; font-family: 'Source Sans 3'; font-style: normal; font-weight: 400; -webkit-box-shadow: 0 0 50px 10px rgba(100,100,100,0.3);
	box-shadow: 0 0 50px 10px rgba(100,100,100,0.3); font-size: 1em; line-height: 1.6em; text-align: left; display: none; }
	#optoutbox.view { display: block; }
	#optoutinner { padding: 30px 60px 30px 30px; }
	#closeOptOut { position: absolute; width: 30px; height: 30px; top: 10px; right: 10px; }
	#closeOptOut span { position: absolute; top: 15px; left: 0; width: 30px; height: 4px; background: #555; -moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);-webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;	}
	#closeOptOut span.barscnd { top: 15px;  -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg);}
	.gaoptoutlink { font-weight: bold !important; text-decoration: none; border-bottom: 1px solid #333; color: #555; }
	/* COOKIEBAR.end */
	
		
	.navrow {
		height: 47px;
		width: 695px;
		font-family: 'Source Sans 3'; font-style: normal; font-weight: 400;
	}
	
	.navinner { padding: 0px 0px 0px 30px; filter:alpha(opacity=90); /* IE */
	-moz-opacity: 0.90; /* Mozilla */
	opacity: 0.90; /* Opera */ background: #FFF; height: 40px;
	}

	.navinner #menu-item-58,
	.navinner #menu-item-61,
	.navinner #menu-item-62 { display: none; }

		.nav { margin: 0px 0px 0px 0px; padding: 0px; }
		.nav li { list-style-type: none; margin: 0px 20px 0px 0px; }
		.nav li a { color: #333; text-decoration: none; border-top: 5px solid #FFF; padding: 5px 0px 9px 0px; display: inline-block;}
		
		.sf-arrows .sf-with-ul {
			padding-right: 0em !important; 
			*padding-right: 0em !important; /* no CSS arrows for IE7 (lack pseudo-elements) */
			background: none;
		}
		
/*		ul li a { background: #FFF !important; color: #333 !important; padding: 0px 5px !important; font-size: 1em; }			*/
		/*ul li a:hover { background: #999 !important; color: #FFF; }			
		ul li a.active { background: #777 !important; color: #FFF; }	*/
		
		.sf-menu { margin: 0px !important; }
		.sf-menu ul a { border-top: 0px solid #FFF !important; }
		.sf-menu ul a:hover { border-top: 0px solid #FFF !important; }
		.sf-menu ul li.current_page_item a { border-top: 0px solid #FFF !important; }
		
		.sf-menu ul {
			min-width: 1em; /* allow long menu items to determine submenu width */
			width: 16em !important; /* no auto sub width for IE7, see white-space comment below */
			background: #FFF;
		}
		
		.sf-menu li { background: none !important; }
		.sf-menu li ul li a { padding: 10px 10px; }
		
		
	.csc-sitemap { padding: 0px; margin: 0px; }	
	.csc-sitemap ul { padding: 0px; margin: 0px; list-style-type: none; }	
	.csc-sitemap ul li { padding: 0px !important; margin: 0px !important; }	
	.csc-sitemap ul li ul { padding: 0px 0px 20px 40px !important; margin: 0px !important; }	
	.csc-sitemap ul a { color: #555; }	
		
	.clearing { clear: both; height: 1px; overflow: hidden;	}
	
	.opener { background: #FFF; margin-top: -100px !important; 
	position: absolute; width: 971px; height: 100px; 
	filter:alpha(opacity=95); /* IE */
	-moz-opacity: 0.9%; /* Mozilla */
	opacity: 0.95; /* Opera */
	font-family: 'Source Sans 3'; font-style: normal; font-weight: 400;
	font-size: 30px;	
	line-height: 36px;
	font-weight: 600;
	padding: 0px 0px 0px 0px;
	}
	
	.opener h1 { 
		font-family: 'Source Sans 3'; font-style: normal; font-weight: 400;
		font-size: 30px;	
		line-height: 36px;
		font-weight: 600;
		padding: 0px 0px 0px 0px;
		margin: 0px;
	}
	
	.opener p { margin: 0; }

	.openerwide { padding: 14px 0px 0px 40px; }
	
	#contentcontainer {
		/* NONE */
	}
	
	#contentwrapper h1 {
		color: #777;font-family: 'Source Sans 3'; font-style: normal; font-weight: 400;
	}	
	
		#sidebarwrapper { width: 275px; float: left; background: #FFF url("img/fond/sidebar-bottom.png") bottom center; background-repeat: no-repeat; 
		font-family: 'Source Sans 3'; font-style: normal; font-weight: 400;
		padding: 0px 0px 50px 0px;
		min-height:500px;
		
		  height:auto !important;
		
		  height:500px;
		}
		
		#sidebarwrapper .csc-textpic-imagewrap { margin: 45px 0px 0px 0px; }
		#sidebarwrapper .csc-textpic-text p { margin: 0px 20px;	color: #000; font-size: 20px; line-height: 26px; }
		#sidebarwrapper .csc-textpic-text p a { text-decoration: none; }
	
		
		#sidebarwrapper ul { margin: 40px 20px 0px 0px; padding: 0px; list-style-type: none; 	}
		#sidebarwrapper ul li { padding: 0px 0px 20px 0px; list-style-type: none; 	}
		#sidebarwrapper ul li a { text-decoration: none; padding: 0px 0px 0px 40px; 
		display: block; } 		
		
		#contentwrapper { width: 695px; float: left; }
		.wp-block-table { margin: 20px 0 }
		#contentwrapper h2 { font: 22px/30px 'Source Sans 3', sans-serif; font-style: normal; font-weight: 600; }
		#contentwrapper h3 { font: 18px/26px 'Source Sans 3', sans-serif; font-style: normal; font-weight: 600; margin: 20px 0px 3px 0px; padding: 0px; }
		#contentwrapper p, #contentwrapper table  { font: 16px/26px 'Source Sans 3', sans-serif; font-style: normal; font-weight: 400; margin: 0px 0px 10px 0px; }

		#contentwrapper ul { font: 16px/26px 'Source Sans 3', sans-serif; font-style: normal; font-weight: 400; }
		#contentwrapper ul li { margin: 0px 0px 15px 0px; }
			.contentinner { padding: 20px 30px 40px 40px; }
	
	#kontaktbutton a {
		width: 40px; height: 150px; position: fixed; right: 0px; top: 270px; 
	}
	
	#contentwrapper table a { color: #333 }
	
	
	.hhtable { font: 0.8em/1.5em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;  border-collapse: collapse;  }
	.hhtable thead { font-weight: bold; }
	.hhtable td { padding: 10px 0px; border-collapse: collapse; }
	.hhtable tr td { border-bottom: 1px solid #333; border-right: 1px solid #CCC; padding: 10px 10px; }
	
	.col1 { width: 130px;	}
	.col2 { width: 130px;	}
	.col3 { width: 130px;	}
	.col4 { width: 130px;	}
	
	td.col1 { padding: 10px 0px 10px 10px; border-left: 1px solid #ccc; }
	td.col2 { padding: 10px 0px 10px 10px; }
	td.col3 { padding: 10px 0px 10px 10px; }
	td.col4 { padding: 10px 0px 10px 10px; }
	
	.footer td {  font-weight: bold; }
	.footer td.col1 { border-right: 0px; border-left: 0px solid #ccc;  }
	.footer td.col1, .footer td.col2 { border-bottom: 0px; }
	
	#footerwrap p { margin: 0px 0px 10px 0px; }
	
	.teaserwrap { padding: 40px 0px; }
		.teaserimage { float: left; width: 275px; margin: 0px 40px 0px 0px; }
		.teasertext { float: left; width: 595px; font: 14px/22px 'Source Sans Pro', sans-serif; }
		
		.teaserwrap h3 { font: 22px/30px 'Source Sans 3', sans-serif; font-style: normal; font-weight: 600;
		margin: -7px 0px 0px 0px;	}
	

	.telefon { padding-left: 50px; padding-right: 0px; background: url("img/icons/telephone.png") left center no-repeat; }
	#sidebarwrapper a.sub1_active, #sidebarwrapper .current_page_item a { font-weight: bold; color: #ff590e !important; background: url("img/nav/subnav-light.png") left center no-repeat; }
	
	#sidebarwrapper ul li a:hover {
    background: url("img/nav/subnav-light.png") left center no-repeat;
}
	#sidebarwrapper .current_page_item a {
    font-weight: bold;
    color: #ff590e !important;
    background: url("img/nav/subnav-light.png") left center no-repeat;
}
	.flagswitcher { position: fixed; width: 100px; height: 30px; 
		top: 0px; left: 0px; padding: 10px 0px 0px 10px;
		font: 14px/22px 'Source Sans 3', sans-serif; font-style: normal; font-weight: 400;
		}
		
	.flagswitcher a { color: #000; text-decoration: none;	}
	.flagswitcher p { margin: 0px; }
		
	#footerwrap {
		padding: 20px 0px 40px 0px;
		font: 14px/22px 'Source Sans 3', sans-serif; font-style: normal; font-weight: 400;
		border-top: 1px solid #FFF;
	}
	
	#footerwrap a { color: #333; text-decoration: none; }
	
	*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

	.footercol1 { float: left; width: 275px; margin: 0px 35px 0px 0px; }
	.footercol2 { float: left; width: 350px; margin: 0px 35px 0px 0px; }
	.footercol3 { float: left; width: 275px; margin: 0px 0px 0px 0px; }

	#mobileMenu { display: none; }

	#menuCaller { display: none; }
	@media screen and (max-width: 1000px) {

		.phonebox { display: none; }

		/*body.helfendeHaendeView { background: #efefef; }*/

		.centerpage { max-width: 90%; width: auto; }

		.logocol { width: 200px; height: 250px; position: absolute; }
		.logocol img { width: 100%; height: auto }

		.stagerow { float: right; width: calc(100% - 200px); height: 260px; background-size: cover; background-position: top center }

		.opener { height: auto; width: 100%; position: relative; margin: 0; font-size: 1.4em; padding: 15px 30px}
		.openerwide { padding: 15px 30px }

		.teasertext, .teaserimage { width: 100%; float: none;  }
		.teaserimage img { width: 100%; height: auto }

		.navstagecol { position: relative;  }

		#bodywrap { background: none; }

		#sidebarwrapper { background: #fff; }

		#headerwrap { height: 350px }

		#sidebarwrapper { width: 30%; float: left; }
		#contentwrapper { width: 70%; float: left; background: #fff; }

		#sidebarwrapper img { width: 100%; height: auto }

		.navrow { display: none; }

		#mobileMenu { display: block; position: fixed; top: 0; right: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.9); z-index: 99999; right: -100% }
		#mobileMenu.mobileMenuView { right: 0; overflow-y: scroll; }


		#bodywrap #mobileMenu a { color: #ff590e; text-decoration: none; font: 16px/26px 'Source Sans 3', sans-serif; font-style: normal; font-weight: 400;; border: 0 !important; border-top: 0; }
		#bodywrap #mobileMenu li { border: 0 !important; border-top: 0; list-style-type: none; margin: 0 0 10px 0 }
		 #bodywrap #mobileMenu .mainmenuClass > ul > li > a { font-size: 1.4em } 
		#bodywrap #mobileMenu .sub-menu { margin: 20px 0 }
		#bodywrap #mobileMenu .sub-menu a { color: #555 }


		#mobileMenu .mainmenuClass { padding: 20px 0 }
		#menuCaller { display: block; position: absolute; top: 0; right: 0; z-index: 9999; display: inline-block; 
			background: #fff; font: 16px/26px 'Source Sans 3', sans-serif; font-style: normal; font-weight: 400; color: #ff590e; padding: 10px 20px; text-decoration: none; }

		#headerwrap { position: relative; }
	}

	@media screen and (max-width: 700px) {
		.opener { font-size: 1em; line-height: 1.2em }
	}

	@media screen and (max-width: 500px) {
		#sidebarwrapper { width: 100%; float: none; display: none; }
		#contentwrapper { width: 100%; float: none; background: #fff; }

		.centerpage #headerwrap { width: calc(100% + 10%); max-width: calc(100% + 10%); margin: 0 0 0 -5% }
		.stagerow { background-position: center center }

		.opener br { display: none; }
		.opener { padding: 0; background: none }

		#contentwrapper h2 { font-size: 1.1em; line-height: 1.2em }

		.logocol { width: 120px; }
		.stagerow { float: right; width: calc(100% - 120px); height: 155px; }

		#headerwrap {
		    height: 255px;
		}
		.footerColumn { margin-bottom: 20px; width: 100%; }

		#contentwrapper p, #contentwrapper table, #contentwrapper ul { font-size: .9em; line-height: 1.5em }


	}

	@media screen and (max-width: 400px) {
		.logocol { width: 90px }
		.stagerow { float: right; width: calc(100% - 90px); height: 115px; }

		#headerwrap {
    height: 215px;
}

	}