/*  **** css sy_nitschke template responsive design | joomla 3_x |  dr. anke kleine-tebbe chefärztin brustzentrum drk kliniken berlin 	**** */

/*   farben  

streifen header / footer :
ffffff> 	balken oben/unten

_____________________________________
	
magenta	  anke kleine-tebbe   F10E5F          

grau   überschriften 575757      

- links
- h3 
- hover / current für links 

alte website:

grau 	9A9798  	
_____________________________________


schrift     Fira Sans (Standard DRK)

*/
/* fira-sans-regular - latin */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/fira-sans-v10-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Fira Sans Regular'), local('FiraSans-Regular'),
       url('../fonts/fira-sans-v10-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/fira-sans-v10-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/fira-sans-v10-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/fira-sans-v10-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/fira-sans-v10-latin-regular.svg#FiraSans') format('svg'); /* Legacy iOS */
}

html { /* sticky footer nach james dean > http://mystrd.at/modern-clean-css-sticky-footer/ */
    position: relative; 
	min-height: 100%;
	}
	
	
body {
	font-size:0.85em;
	font-family: "Fira Sans", Arial, sans serif;
	line-height:150%;
	overflow-x:hidden;
	width:100%;
	color:#363636;
	margin: 0 0 3em; /* bottom = footer height */
}

.clear {
	float: none;
    clear:both;
	height: 1px;overflow:hidden;
	background-color: transparent;
	width: 1px;
	}
	
/*  ***** allg. links  ***** */		
a:link, a:visited {
	text-decoration: none;
	font-weight: normal;
	color: #F10E5F;
	}

a:hover, a:focus {
	text-decoration: none;
	color: #F10E5F;
	}
	
/*  *****  link footer internetlösungen  ***** */	
a.white {
	color: #F10E5F;
	}
	
a:hover.white, a:focus.white {
	color: #A60202;
	}
	
/*  ***** weiterlesen  links  ***** */
.btn {
	font-size:0.90em;
	}
.readmore {margin-top:-15px;}
#img {
	width:100%;
	height:auto;
}

div.djslider {
	float: left;
}

#pageslide {
	/* nicht verändern > plugin > slide-menü / mobil */
    display: none;
	position: absolute;
	position: fixed;
	top: 0;
	height: 95%;
	z-index: 999999;
	/* Specify the width of your pageslide here */
    width: 200px;
	padding: 20px;
    
    /* individuelle stile der pagesslide        E6F9F9*/
    background-color: #FFF;
    -webkit-box-shadow: inset 0 0 5px 5px #3A4559;
    -moz-shadow: inset 0 0 5px 5px #3A4559;
	box-shadow: inset 0 0 5px 5px #3A4559;
	background-color: #FFFFFF;
	overflow:visible; overflow-y: scroll;
}

#pageslide ul {background:none;}

#pageslide ul li a {
	background:none;
	box-shadow:none;
	text-align:left;
}
/*Accordion pagebreak*/
.collapse:not(.show){display:none}.collapsing{height:0;overflow:hidden;-webkit-transition:height .35s ease;-o-transition:height .35s ease;transition:height .35s ease}
/* accordion zu */

.container {
	max-width:940px;
	width:100%;
	position:relative;
	margin:0 auto;
}

header {
	float:left;
	width:100%;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	*behavior: url(../scripts/boxsizing.htc);  
	padding: 1%;
	background-color: #FFFFFF;
	}

.js .open {
	display:inline;
	float:left;
	height:39px;
	width:46px;
	text-indent:-9999px;
	background-image: url(../images/open.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	margin-top: 2.5%;
	margin-right: 0%;
	margin-bottom: 0%;
	margin-left: 5px;
}

#logo {
	width:250px;
	display:block;
	height:72px;
	text-align:center;
	float:left;
	text-indent:-9999px;
	background-image: url(../images/logo_mobil.png);
	background-repeat: no-repeat;
	background-position: center top;
	margin-top: 2%;
	margin-bottom: 0;
	margin-left: 3%;
}

.mod-finder.js-finder-searchform.form-search {
	margin:0 0 20px 18px;
}

/* *** formatierung  des vertikalen menues   nav_1  *** */

.js .mod-menu.-nav_1, .js ul.mod-menu.-nav_1, a.open, {
	  display:none;/* blendet das vertikale menü in der mobilen ansicht aus  */}

		ul.mod-menu.-nav_1 { 
				list-style: none;
				padding: 0px;
				margin: 0px;
				margin-bottom:20px;			
			}
		
		/* *** listenpunkt formate *** */
		ul.mod-menu.-nav_1 li {
				color: #F10E5F;
				list-style: none;
				text-indent: -2px;
				line-height: 20px;
				}
		ul.mod-menu.-nav_1 li ul {
                list-style: none;
				padding: 0px 0px 0px 0px;
				margin: 0px;
				line-height: 20px;
				}
				
		/* *** link formate   *** */
		ul.mod-menu.-nav_1 li a {
				color: #363636;
				text-decoration: none;
				padding-left: 20px;
				padding-bottom:1px;
				display: block;
				width: 215px;
				border-left-style: none;
				margin: 0px;
				line-height: 20px;
				 }
				
			/* *** link formate   >	submenue	einziger unter schied zu link formate > texteinzug > text-indent 20 px zusätzlich  *** */		
			ul.mod-menu.-nav_1 li.current ul li a, ul.mod-menu.-nav_1 li ul li.current a, ul.mod-menu.-nav_1 li ul li a {
				color: #363636;
				text-decoration: none;
				padding-left: 8px;
				padding-bottom:1px;
				display: block;
				width: 215px;
				margin: 0px;
				text-indent: 25px;
				}	
			
			
		/* ***  link formate hover, aktiver menuepunkt 	current	*** */
		
         ul.mod-menu.-nav_1 li.current ul li a:focus, ul.mod-menu.-nav_1 li a:hover, ul.mod-menu.-nav_1 li a:hover {
				text-decoration: none;
				color: #F10E5F;
				width: 215px;
				}
		
		/* *** 2. ebene aktiv > current mit einzug *** */	
		 ul.mod-menu.-nav_1 li.current ul li a:hover, ul.mod-menu.-nav_1 li.current ul li a:active, ul.mod-menu.-nav_1 li ul li.current a  {
				text-decoration: none;
				color: #F10E5F;
				width: 215px;
				text-indent: 25px;			
				}
				
               /* *** 2.Ebene aktiv - nicht aktive Menüpunkte*/
                ul.mod-menu.-nav_1 li ul li a {
				text-decoration: none;
				color: #363636;
				width: 210px;
				text-indent: 25px;
				}
               ul.mod-menu.-nav_1 li ul li a:hover, ul.mod-menu.-nav_1 li ul li a:active, ul.mod-menu.-nav_1 li.current ul li a:hover, ul.mod-menu.-nav_1 li.current ul li a:active {
				text-decoration: none;
				color: #F10E5F;
				width: 215px;
				text-indent: 25px;				
				}
	
		/* *** 1. ebene aktiv > current mit einzug *** */			
		ul.mod-menu.-nav_1 li.current a {
				text-decoration: none;
				color: #F10E5F;
				width: 215px;			
				}
		/* *** definiert die schriftgröße des submenüs  > ul.nav-child unstyled small*** */		
		ul.unstyled  {
				font-size:0.95em;
				}	
				
/* *** ENDE   formatierung  vertikales menue   nav_1  *** */

#image_nav_container {
	margin:0 auto;
	max-width:1090px;width:100%;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	*behavior: url(/scripts/boxsizing.htc);
	padding-top: 1%;
	padding-right: 4%;
	padding-bottom: 0%;
	padding-left: 4%;
	display:flex;
	flex-wrap:wrap;
}

#image_nav_container img  {
	margin:1% 0;
	max-width:100%; 
	height:auto;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	position:relative;
	*behavior: url(/scripts/boxsizing.htc);
}
/* Header-Bild pink rand*/
#image_nav_container #img img  {
	padding:0 0 22px 22px;
	background-image:url(../images/pink.gif);
	background-position:-200px 50px;
	background-repeat:no-repeat;
}

/*Captcha reload bild formular*/
#image_nav_container #bfElemWrap88 .ff_elem img {
    max-width: 20px;
    float: right !important;
    margin-top: -24px !important;
}
#content {
	width:100%;
	float: right;
	text-align:left;
	padding-left: 1%;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	/* position:relative;   */
	padding-bottom: 3em;   /*  für abstand zum footer   */
	margin-top: 0%;
	margin-right: 0%;
	margin-bottom: 2%;
	margin-left: 0%;
	*behavior: url(/scripts/boxsizing.htc);
	list-style-position: outside;
	list-style-image: url(../images/listenpunkt.png);
	}  	
	ul.pagination {
		display: flex;
		gap: 20px;
		justify-content: space-between;
		list-style-type: none;
		list-style-image:none;
	  }
#navbox {
	width:100%;display:none;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	position:relative;
	margin-top: 0%;
	margin-right: 0%;
	margin-bottom: 8%;
	margin-left: 0;
	position:relative;
	text-align:left;
	font-size: 1.05em;
	font-weight: 200;
	*behavior: url(/scripts/boxsizing.htc);
	}

footer {
	position:absolute;
	bottom:0px !important;
	float:left;
	background:#ffffff;
	width:100%;
	height:3em;
	margin: 0 auto;
	padding:0% 0% 0% 4%;  /* abstand der schrift zur box   */
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	color: #333333;
	font-size: 0.95em;
	*behavior: url(/scripts/boxsizing.htc);
}

footer section {
	margin-bottom:0px;
}

footer section p {
	font-size: 0.85em;
}
		/*Aktivitäten*/
.blog-items {    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.blog-item {max-width:47%;}
/*Video*/
a.btn-primary, a.btn-secondary {background-color:#F10E5F; color:#ffffff; font-weight:bold; padding:10px; border-radius:5px; margin-top:20px;display:block;border:1px solid #f10e5f;}
a.btn-primary:hover, a.btn-primary:active, a.btn-primary:focus, a.btn-secondary:hover, a.btn-secondary:active, a.btn-secondary:focus {border:1px solid #f10e5f; color:#f10e5f; background-color:#fff;}
/*Accordion*/
/*#article75-sliders1*/ .accordion-item:first-of-type {display:none;}/*ersten ausblenden*/
.visually-hidden {display:none;}

h3.title, .accordion-header {
    background-color: #f10e5f;
    padding-left: 10px !important;
}
h3.title a, .accordion-header a {color:#ffffff; display:block; padding: 3px;}
h3.title.pane-toggler-down, button .accordion-button.collapse {
    background-image: url(../images/pfeil-nach-oben.gif);
	background-repeat:no-repeat; background-position:right center;
}
h3.title.pane-toggler, button .accordion-button.collapsed {
    background-image: url(../images/pfeil-nach-unten.gif);
	background-repeat:no-repeat; background-position:right center;
}
@media screen and (min-width:420px) {

	body {font-size:0.9em;}
	#navbox {display:none;}
	footer {height:3em;}

}

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

	body {font-size:0.9em;}

/*   ab  hier wird der menü-button ausgeblendet & menü wieder angezeigt   */	
	#pageslide, .open {display:none;}
	.js a.open {display:none;}
	.js #menu-nav_1 {display:none;}
	
	#content section a {
		padding:1%;
	}
	
	.js .open {
	margin-top: 40px;
}
	
	#logo {
	width:336px;
	display:block;
	height:96px;
	text-align:center;
	float:left;
	text-indent:-9999px;
	margin-top: 2%;
	margin-bottom: 0px;
	margin-left: 8%;
	background-image: url(../images/logo2.png);
	background-repeat: no-repeat;
	background-position: center top;
	}
	
	#navbox {
	display:inline;
	float:left;
	text-align:left;
	width:34.46808510638298%;
	padding-top: 1.2%;
	padding-right: 0%;
	padding-bottom: 0%;
	padding-left: 2.5%;
	}
	
				
/*   ab  hier content breite 66%    */
	#content { width:65.53191489361703%;  
	padding:1.5% 2.5% 2.5% 5%;}


}

@media screen and (min-width:550px) {
	
	#image_nav_container {
		padding-top:0%;
		padding-bottom:0;
	}
	
	body {font-size:0.93em;}


}

@media screen and (min-width:620px) {
	#image_nav_container #img img  { background-position:-90px 80px; padding: 0 0 32px 32px;}
	header {
		padding-top:5px;	
		padding-bottom:0;	
	}
	
  
	#image_nav_container {
		padding-bottom:0;	
	}
	
	#image_nav_container img {margin:1% 0 0 0%;}
	
	#content {padding:1% 1% 3% 3%;} 
	
}

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

	body {font-size:0.95em;}
	
	#content {  
	padding:1% 2.5% 2.5% 3.5%;}
	
	
	#logo {
	margin-left: 8%;
	}
	
	
	#image_nav_container img {margin:1% 0 0%;}

	
	footer section {
		
		margin-left:3.5%;
		float:left;	
	}
	
	footer section:last-child {margin-right:0;}
	
}

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

	#content {  
	padding:1% 2.5% 2.5% 4%;}

	
	#image_nav_container img {
		float:left;
		/*width:100%; */
	}
	/*Captcha reload bild formular*/
#image_nav_container #bfElemWrap88 .ff_elem img {
    max-width: 20px;
    float: right !important;
    margin-top: -24px !important;
}
	#logo {
	margin-left: 8%;
	}
	
  
}

@media screen and (min-width:980px) {
	
	body {font-size:0.98em;}
	
	#logo {
	width:940px;
	display:block;
	height:48px;
	margin-left: 0%;
	background-image: url(../images/logo.png);
	background-repeat: no-repeat;
	background-position: center top;
	}
	
	#image_nav_container img {
	margin:0% 0 1%;
	}

	footer {
	padding:0% 0% 0% 3%;  /* abstand der schrift zur box   */
}

}


@media screen and (min-width:1080px) {
	
#image_nav_container #img img  { background-position:bottom left; padding: 0 0 42px 42px;}
	#logo {
	margin-left: 0%;
	}
	
	footer {
	padding:0% 0% 0% 1%;  /* abstand der schrift zur box   */
}

}


/*  ***** RESERVIERTE KLASSEN  ***** */


			
/* **** content | inhalte formate **** */
		
		.klein {font-size:0.82em;}
		
		a.blogsection:link,
		a.blogsection:visited {
			color: #F10E5F;
			text-decoration: underline;
		}
		.small {
			color: #999999;
			font-size: 0.80em;
		}
		.createdate {
			height: 15px;
			padding-bottom: 10px;
			color: #999999;
			font-size:0.8em;
		}
		.modifydate {
			height: 15px;
			padding-top: 10px;
			color: #999999;
			font-size:0.8em;
		}
		span.article_seperator {
			height:20px;
			background: #FFFFFF;
			width: 300px;
		}
		div.mosimage_caption {
			margin-top: 10px;
			margin-left: 5px;
			background: #ffffff;
			padding:0px;
			color: #666;
			font-size:0.8em;
			width: auto;
		}
		.back_button {
			float: left;
			text-align: center;
			font-size:0.8em;
			width: auto;
			padding: 0px 10px;
			line-height: 20px;
			margin: 1px;
		}

		.readon{
			text-decoration: none;		
		}
		
		/*  breadcrumbs  */
		.pathway {
			padding-left: 5px;
			}
		
		/*  pdf button  */
		.buttonheading {
			background-color: #FFFFFF;
			font-family: Open Sans, Verdana,Arial, Helvetica, sans-serif;
			font-size:90%;
			color: #575757;			
		}

		
		
		#content div.contentheading, #content div.contentpane, 
		h1 {
		font-family: "Open Sans", Verdana, Arial, Helvetica, sans-serif;
		font-size: 1.15em;
		margin-bottom:0.4em;
		color: #575757;
		font-weight: 400;
		}	
		
		h2, h2.item-title {
		font-family: "Open Sans", Verdana, Arial, Helvetica, sans-serif;
		font-size: 1.15em;
		margin-bottom:0.4em;
		color: #575757;
		font-weight: 400;
		}
		
		
		/*  h3 grau  */
		h3 {
		font-family: "Open Sans", Verdana, Arial, Helvetica, sans-serif;
		font-size: 1.00em;
		margin-bottom:.8em;
		color: #464646;
		font-weight: 400;
		}	
		
		h4, h5, h6 {
		font-family: "Open Sans", Verdana, Arial, Helvetica, sans-serif;
		font-size: 0.95em;
		margin-bottom:.4em;
		color: #333333;
		font-weight: 400;
		}
		
		
		div.contentpane th {
					font-weight: normal;
		}
		
		div.contentpane input.button {
					margin-bottom: 20px;
		}
	
		.inputbox {
					width: 200px;
					border: 1px dotted #F10E5F;
					font-size: 0.8em;
					margin-bottom:2px;
					background-color: #F0F7F4;
		}
		
		.button {
					border: 1px dotted #575757;
					background-color: #FFFFFF;
					font-family: Open Sans, Verdana,Arial, Helvetica, sans-serif;
					font-size: 0.8em;
					color: #575757;
		}
		button,
		html input[type="button"]{
					border: 0;
					background-color: transparent;
					color: #fff;
					}
		input[type="submit"]#field9  {
					  background-color: #F10E5F;
					  color: #fff;
					  padding: 7px 20px;
					  float: right;
					  border:0;
					  border-radius: 5px;
		}
		.field7, .field6 {
						margin-top: 10px;
					}
		textarea {
					width: calc(100% - 20px);
		}
		textarea#field7 {
					font-size: .9rem;
					border: 0;
				}
		.contentheading {
					font-size:0.95em;
					letter-spacing: 1px;
					font-family: "Open Sans", Verdana, Arial, Helvetica, sans-serif;
					font-weight: 100;
					color: #575757;
					padding-top: 5px;
		}
		
		/************ weblinks ********************/
		
		.category-desc base-desc {
					font-size:90%;
					font-family: "Open Sans", Verdana, Arial, Helvetica, sans-serif;
					font-weight: 100;
					color: #F10E5F;
					padding-top: 20px;
		}
		


/*  **** ende css 	sy_nitschke_joomla!_3x_responsive 	**** */