@font-face {
    font-family: "Titillium Web";
    src: url('TitilliumWeb-SemiBoldItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;

}




@font-face {
    font-family: "Titillium Web";
    src: url('TitilliumWeb-SemiBold.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;

}




@font-face {
    font-family: "Titillium Web";
    src: url('TitilliumWeb-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;

}




@font-face {
    font-family: "Titillium Web";
    src: url('TitilliumWeb-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;

}




@font-face {
    font-family: "Titillium Web";
    src: url('TitilliumWeb-Italic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;

}




@font-face {
    font-family: "Titillium Web";
    src: url('TitilliumWeb-BoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;

}




@font-face {
    font-family: "Titillium Web";
    src: url('TitilliumWeb-Bold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;

}




@font-face {
    font-family: "Titillium Web";
    src: url('TitilliumWeb-SemiBoldItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;

}

html {
  font-family: "Titillium Web", sans-serif;
}



/**
 * Mobile first
 */

body {
	font-size:80%;
	background:#fff;
	font-family: "Titillium Web", sans-serif;
}

.border {
	border: 1px solid #000000;
}

p {
	color:#4C4C4C;
}

h2 {
	padding: 15px 0;
	line-height:115%;
	color: #4C4C4C;
	font-weight:500;
	margin:0;
}
h3 {
	padding: 5px 0;
	color: #4C4C4C;
	font-weight:500;
	margin:0;
}

table, tr, td {
	padding: 0;
	margin:0;
}

.fortbildung td {
	padding: 10px 10px 0px 0px;
	font-size: 1.25em;
	line-height:1.4em;
	vertical-align:top;
	
}

/**
 * Bilder sollen "fluiden", daher werden diese in doppelter Groesse abgespeichert - bitte unbedingt auf kleine Dateigroessen achten
 Startseitebilder: (265px breit und 175px hoch) x 2 = 530x350px
 Contentbilder: (178px breit und 118px hoch) x 2 = 356x236px
 */
img {
	width:100%;
	height:auto;
}

/**
 * begrenzt die Skalierung fuer die Bilder auf der Startseite
 */
.imghome {
	width:100%;
	height:auto;
	max-width:630px;
	max-height:420px;
	box-shadow: 0 7px 10px 0 rgba(0,0,0,0.4);
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	*behavior: url(../boxsizing.htc);
}

/**
 * begrenzt die Skalierung fuer die Bilder fuer die Contentseiten
 */
.imgcontent {
	width:100%;
	height:auto;
	max-width:356px;
	max-height:236px;
	box-shadow: 0 7px 10px 0 rgba(0,0,0,0.4);
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	*behavior: url(../boxsizing.htc);
}

/**
 * Teamfoto
 */
.imgteam {
	width:100%;
	height:auto;
	max-width:700px;
	max: height 415px;;
	box-shadow: 0 7px 10px 0 rgba(0,0,0,0.4);
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	*behavior: url(../boxsizing.htc);
}
.imgportr {
	width:100%;
	height:auto;
	max-width:100px;
	max-height:150px;
	box-shadow: 0 7px 10px 0 rgba(0,0,0,0.4);
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	*behavior: url(../boxsizing.htc);
}
.white {color: #FFFFFF;}
.yellow {color: #F3DBC9;}
.red {color: #70242D;}
.anthrazit {color: #4C4C4C;}
.black {color: #000000;}


/**
 * durch margin:0 auto wird das Element horizontal zentriert, deshalb wiederholt es sich container in header, content, footer
 */
.container {
	max-width:960px;
	margin:0 auto;
}

header {
	float:left;
	width:100%;
	height:122px;
	font-size:1.3em;
	background:url(../images/basis/header_bg.png) top center no-repeat;
	background-size: 100% 100%;
	padding:0;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	*behavior: url(../boxsizing.htc);
}

nav {width:100%;
}

#navMeta {
	width:100%;
	height:28px;
	padding:0 0 0 0;
	margin:0;
	list-style:none;
}

#navMeta li {
	float:right;
	padding:5px 12px 0 0;
	margin:0;
	text-align:right;
}

#navMeta li a {
	color:#F3DBC9;
	text-decoration:none;
}

#navMeta li a:hover {
	color:#fff;
}

/**
 * den aktiven Link als eigene Klasse definieren, da besser kontrollierbar
 */
#navMeta li .active {
	color:#fff;
}

#navMeta li:nth-of-type(1) {
	padding-right:10px;
}

#logo {
	width:280px;
	height:94px;
	background:url(../images/basis/logo.png) top center no-repeat;
	background-size: 100% 100%;
	display:block;
	text-align:center;
	float:left;
	text-indent:-9999px; /* damit kann dem Logo ein Beschreibungstext hinterlegt werden, der nicht angezeigt wird */
	margin:0 0 0 22px;
}

#content {
	float:left;
	width:100%;
	padding:0;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	*behavior: url(../boxsizing.htc);
}

#content section {
	float:left;
	width:100%;
	margin:0;
	padding:0 0 30px 0;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	*behavior: url(../boxsizing.htc);
}

#content section h1 {
	padding:5px 0 0 22px;
	font-size:1.5em;
	line-height:115%;
	color: #70242D;
	font-weight:400;
	margin:0;
}



/**
 * eigene Klasse fuer die Headline, um den Abstand nach unten individuell fuer Start und Content definieren zu koennen
 */
#content section .h1home {
	padding-bottom:17px;
}

#content section .h1content {
	padding-bottom:17px;
}

#content section p {
	font-size: 1.3em;
	line-height: 120%;
	margin: 0;
	padding-bottom: 0;
	padding-right: 20px;
	padding-top: 0;
}

#content section .colhome {
	float:left;
	width:100%;
	text-align: left;
	padding:0 32px 0 0;
	margin:0 0 10px 0;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	*behavior: url(../boxsizing.htc);
	}

#content section .colcontent {
	float:left;
	width:100%;
	text-align: left;
	padding:0 12px 0 0;
	margin:0 0 7px 0;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	*behavior: url(../boxsizing.htc);
}

#content section .paddingimghome {
	float:left;
	padding-left:22px;
}

#content section .paddingtexthome {
	float: left;
	padding-top: 15px;
	padding-left: 20px;
}

#content section .paddingimgcontent {
	float:left;
	padding-left:22px;
}

#content section .paddingtextcontent {
	float: left;
	padding-top: 8px;
	padding-left:22px;
}

#content section .colcontent:nth-of-type(2), #content section .colcontent:nth-of-type(3) {
	display:none;
}

#navMain {
	font-size:1.4em;
	padding:9px 0 15px 22px;
	margin:0 0 15px 0;
	list-style:none;
	border-bottom: 15px solid #eee;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	*behavior: url(../boxsizing.htc);
}

#navMain li {
	padding-top:0px;
}

#navMain li a {
	width:258px;
	margin:0 0 0 0;
	text-align:left;
	color:#4C4C4C;
	text-decoration:none;
	display:block;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	*behavior: url(../boxsizing.htc);
}

#navMain li a:hover {
	color:#70242D;
	background:#eee;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	*behavior: url(../boxsizing.htc);
}

/**
 * den aktiven Link als eigene Klasse definieren, da besser kontrollierbar
 */
#navMain li .active {
	color:#70242D;
	background:#eee;
	font-weight:bold;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	*behavior: url(../boxsizing.htc);
}

/**
SubNavigation fuer Contentseite
 */
#navSub {
	font-size:0.93em;
	padding:0;
	margin:0 0 2px 15px;
	list-style:none;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	*behavior: url(../boxsizing.htc);
}


#navSub li a {
	width:243px;
	font-weight:400;
	text-align:left;
	color:#4C4C4C;
	text-decoration:none;
	display:block;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	*behavior: url(../boxsizing.htc);
}

#navSub li a:hover {
	color:#70242D;
	background:#eee;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	*behavior: url(../boxsizing.htc);
}

/**
 * den aktiven Link als eigene Klasse definieren, da besser kontrollierbar
 */
#navSub li .active {
	color:#70242D;
	background:#eee;
	font-weight:bold;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	*behavior: url(../boxsizing.htc);
}

footer {
	float:left;
	width:100%;
	padding:0;
	background:#eee;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	*behavior: url(../boxsizing.htc);
}

footer section {
	margin:0;
	padding:15px 20px 10px 22px;
}

footer section p {
	font-size:1.2em;
	line-height:120%;
	padding:0;
	margin:0;
}

footer section a {
	color:#4C4C4C;
	text-decoration:none;
}

footer section a:hover {
	color:#4C4C4C;
}

footer section .col {
	padding-bottom:7px;
	}
	
/**
 * Queransicht bei Smartphones (Landscape) - Bilder werden 2spaltig angeordnet
 */
@media screen and (min-width:400px) {

	#logo {
	width:294px;
	}
	
	#navMain li a {
	width:265px;
	}
	
	#navSub li a {
	width:250px;
	}
	
	#content section .colhome {
	width:100%;
	}
	
	#content section .paddingtexthome .colhome:nth-of-type(1) {
	width:47.5%;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	*behavior: url(../boxsizing.htc);
	}
	
	#content section .colcontent {
	width:50%;
	}
	
	#content section .colcontent:nth-of-type(2) {
	display:inline;
	}
}

/**
 * hier rutscht der Content neben die Navigation (2-spaltig)
 */
@media screen and (min-width:540px) {

	#content nav {
	width:50%;
	float:left;
	display:block;
	}
	
	#content section {
	width:50%;
	float:left;
	padding:12px 0 30px 0;
	}
	
	#content section h1 {
	padding-top:17px;
	}
	
	#content section .colhome {
	width:100%;
	}
	
	#content section .paddingtexthome .colhome:nth-of-type(1) {
	width:100%;
	}
	
	#content section .colcontent {
	width:100%;
	}
	
	#content section .colcontent:nth-of-type(2) {
	display:none;
	}
	
	#content section .paddingtextcontent {
	padding-right:20px;
	padding-bottom:20px;
	}

	#navMain {
	font-size:1.4em;
	padding:27px 0 15px 20px;
	margin:0 0 15px 0;
	list-style:none;
	border-bottom: 0px solid #eee;
	}

	footer section {
	margin-left:50%;
	padding-right:0px;
	}
	
}

/**
 * hier wird es 3-spaltig
 fliessender Uebergang fuer IPad (768px Breite)
 */
@media screen and (min-width:680px) {
	#content nav {
	width:40%;
	}
	
	#content section {
	width:60%;
	}
	
	#content section .colhome {
	width:50%;
	}
	
	#content section .paddingtexthome .colhome:nth-of-type(1) {
	width:47.5%;
	}
	
	#content section .colcontent  {
	width:50%;
	}
	
	#content section .colcontent:nth-of-type(2) {
	display:inline;
	}
	
	footer section {
	margin-left:40%;
	width:60%;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	*behavior: url(../boxsizing.htc);
	}
	
}


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

	#content nav {
	width:34%;
	}
	
	#content section {
	width:66%;
	}
	
	
	#content section .colcontent {
	width:33%;
	}
	
	#content section .colcontent:nth-of-type(3) {
	display:inline;
	}
	
	#content section p {
	clear:both;
	}
	
	#content section .paddingtexthome .colhome:nth-of-type(1) {
	width:52.5%;
	}
	
	#content section .paddingtexthome .colhome:nth-of-type(2) {
	width:40%;
	}
	
	#content section .paddingtexthome {
	float: left;
	margin-right:50px;
	}
	
	#content section .paddingtextcontent {
	padding-right:50px;
	}
	
	footer section {
	margin-left:34%;
	width:66%;
	}
	
}

/**
 * hier wird der Footer 3-spaltig
 */
@media screen and (min-width:880px) {

	#content nav {
	width:30%;
	}
	
	#content section {
	width:70%;
	}
	
	#content section p {
	font-size:1.2em;
	}
	
	#content section .paddingtexthome .colhome:nth-of-type(1) {
	width:57%;
	}
	
	#content section .paddingtexthome {
	margin-right:100px;
	}
	
	#content section .paddingtextcontent {
	padding-right:150px;
	}
	
	#content section .colcontent {
	width:192px;
	}
	
	
	footer section {
	margin-left:30%;
	width:70%;
	}
	
	footer section .col {
	float:left;
	padding-bottom:20px;
	}
	
	footer section .col:nth-of-type(1) {
	width:28%;
	}
	
	footer section .col:nth-of-type(2) {
	width:40%;
	}
	
	footer section .col:nth-of-type(3) {
	width:25%;
	}
	footer section .col:nth-of-type(4) {
	width:42px;
	margin-right:10px;
	}
	footer section .col:nth-of-type(5) {
	width:42px;
	}
	
}


.teamgroup {
	width: 100%;
	padding: 5px 0 5px 0;
	float: none;
	clear: both;
}
.teambox {
	width: 150px;
	padding: 5px 22px 22px 0;
	float: left;
}
.bold {
	font-weight: bold;
}
.link-inline {
	text-decoration: none;
	color: #9E022F;
	
}

/**
 * zusätzliches CSS
 */

.icon {
	width: 29px!important;
}
.icon:hover {
	opacity: 0.7;
}

.bfs {
	width:136px; 
	height:80px;
}
.bfs:hover {
	opacity: 0.7;
}