html {
	color: #4e4e4e;
	background: #FFF;
	font-size: 18px;
	line-height: 1.375;
	font-family: 'Roboto', sans-serif;
	position: relative;
	overflow-y: scroll;
}

.container {
	max-width: 1490px;
	margin: 0 auto;
}

h1, h2, h3 {
	font-family: 'Titan One', sans-serif;
	font-weight: 400;
}

h1 {
	text-transform: uppercase;
	font-size: 30px;
	margin:0;
	padding: 24px 0;
}

h2 {
	font-size: 21px;
	font-weight: 400;
	color: #3598d8;
}


.container .wrapper h2 {
	padding-top: 17px;
}

.container .wrapper .news-overview h2,
.container .wrapper .termine-overview h2 {
	padding-top: 0;
}

button,
.button {
	color: #fff;
	font-weight: bold;
	padding:10px 25px;
	background-color: #ee3a43;
	box-shadow: 2px 2px 0px 0px rgba(141,23,29,0.75);
	border-radius: 1px 1px 1px 1px;
	border: 0;
	transition: background-color 0.4s ease;
	display: inline-block;
	text-transform: uppercase;
}

buttton:hover,
button:focus,
.button:hover,
.button:focus {
	box-shadow: 0px 0px 0px 0px rgba(65,11,14,0.75);
}

a {
	text-decoration: none;
	color: #ee3a43;
	transition: color 0.3s ease;
}

a:hover,
a:focus {
	color: #4e4e4e;
}

a.button:hover,
a.button:focus {
	color: #fff;
}

img {
	height: auto;
}

textarea {
	resize: vertical;
	min-height: 100px;
}

/* clearfix */
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

.clearfix {
	display: inline-block;
}
/* start commented backslash hack \*/
* html .clearfix {
	height: 1%;
}

.clearfix {
	display: block;
}
/* close commented backslash hack */

ul {
	list-style: none;
	padding-left: 20px;
}

ul li {
	position:relative;
}

ul li:before {
	content:"-";
	left:-20px;
	position: absolute;
}

/******************************Header*****************************/

header.main {
	width: 79%;
	padding: 0 0 0 21%;
	position: fixed;
	z-index: 1000;
	background-color: #fff;
	top: 0;
	border-bottom: 1px solid #dfd7cd;
}

header.main .logo {
	max-width: 250px;
	margin-top: 15px;
	margin-bottom: 5px;
	float: left;
}

header.main nav.navi {
	float: right;
}

header.main nav.navi ul {
	margin: 0;
	padding: 0;
	list-style: none;
	border-right: 1px solid #f7f7f7;
}

header.main nav.navi ul li:before {
	content:"";
}

header.main nav.navi ul li {
	float: left;
}

header.main nav.navi ul li a {
	padding: 23px 30px;
	border-left: 1px solid #f7f7f7;
	border-top: 5px solid transparent;
	display: block;
	transition: border-color 0.3s ease, color 0.3s ease;
	font-size: 15px;
	color: #4e4e4e;
}

header.main nav.navi ul li:nth-child(1n) a.active,
header.main nav.navi ul li:nth-child(1n) a:hover,
header.main nav.navi ul li:nth-child(1n) a:focus {
	border-top-color: #ee3a43;
	color: #ee3a43;
}

header.main nav.navi ul li:nth-child(2n) a.active,
header.main nav.navi ul li:nth-child(2n) a:hover,
header.main nav.navi ul li:nth-child(2n) a:focus {
	border-top-color: #af7ac4;
	color: #af7ac4;
}

header.main nav.navi ul li:nth-child(3n) a.active,
header.main nav.navi ul li:nth-child(3n) a:hover,
header.main nav.navi ul li:nth-child(3n) a:focus {
	border-top-color: #47c9af;
	color: #47c9af;
}

header.main nav.navi ul li:nth-child(4n) a.active,
header.main nav.navi ul li:nth-child(4n) a:hover,
header.main nav.navi ul li:nth-child(4n) a:focus {
	border-top-color: #27ae60;
	color: #27ae60;
}

header.main nav.navi ul li:nth-child(5n) a.active,
header.main nav.navi ul li:nth-child(5n) a:hover,
header.main nav.navi ul li:nth-child(5n) a:focus {
	border-top-color: #d35400;
	color: #d35400;
}

header.main nav.navi ul li:nth-child(6n) a.active,
header.main nav.navi ul li:nth-child(6n) a:hover,
header.main nav.navi ul li:nth-child(6n) a:focus {
	border-top-color: #f1c40f;
	color: #f1c40f;
}

header.main nav.navi ul li:nth-child(7n) a.active,
header.main nav.navi ul li:nth-child(7n) a:hover,
header.main nav.navi ul li:nth-child(7n) a:focus {
	border-top-color: #3598DB;
	color: #3598DB;
}

header.main .expanded nav.navi {
	left: 0;
}

/***********Navicon*****************/


header.main .navicon {
	display: none;
	padding: 20px;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 200;
}

header.main .navicon .lines {
	display:inline-block;
	cursor:pointer;
	float: right;
	position:relative;
	height:25px;
	width:25px;
	z-index: 900;
}

header.main .navicon .lines > span {
	height:4px;
	background:none repeat scroll 0 0 #ee3a43;
	display:block;
	z-index:1;
	transition: transform 0.2s ease, top 0.2s ease, opacity 0.1s ease;
	position:absolute;
	left:0;
	right:0;
}

header.main .navicon .lines > span.first {
	top:3px;
}
header.main .navicon .lines > span.middle {
	top:10px;
}
header.main .navicon .lines > span.last {
	top:17px;
}

header.main .expanded .navicon .lines {
	margin: 0;
}

header.main .expanded .navicon .lines > span.middle {
	opacity:0;
}

header.main .expanded .navicon .lines > span.first {
	-webkit-transform:translateY(-16px) rotate(45deg);
	transform:translateY(-16px) rotate(45deg);
	top:25px;
}

header.main .expanded .navicon .lines > span.last {
	-webkit-transform:translateY(-16px) rotate(-45deg);
	transform:translateY(-16px) rotate(-45deg);
	top:25px;
}

/******************************Home Content**********************************/
.content {
	min-height: 800px;
}

.content .emo {
	position: relative;
	margin-top: 78px;
}

.content .emo img {
	width: 100%;
}

.content .emo h1 {
	text-transform: uppercase;
	margin:0;
	font-size: 50px;
	position: absolute;
	right: 200px;
	bottom: 20px;
	color: #FFF;
	text-shadow: black 0.05em 0.05em 0.15em;
}

.col2-set {
	max-width: 100%;
	padding: 0 13%;
}

.blue-b{
	background-image: url(../img/dw.jpg);
	background-color: #a0d3e8;
	color: #fff;
}

.children {
	background-image: url(../img/footer.png);
	background-repeat: no-repeat;
	background-position: right top;
	min-height: 285px;
}

.col2-set h1 {
	color: #3598db;
}

.blue-b h1 {
	color: #ee3a43;
}

.col2-set dl {
	margin: 0;
}

.col2-set dl dd {
	color: #ee3a43;
	width: 30%;
	float: left;
	margin: 0;
	line-height: 1.6em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.col2-set dl dt {
	width: 70%;
	float: right;
	margin:0;
	line-height: 1.6em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.col2-set dl dt a {
	color: #4e4e4e;
}

.col2-set dl dt a:focus,
.col2-set dl dt a:hover {
	color: #ee3a43;
}

.col2-set .button {
	margin: 40px 0 0;
	float: right;
	
	position: relative;
}

.col2-set .button:hover,
.col2-set .button:focus {
	top: 2px;
	left: 2px;
}

.col2-set .col-1,
.col2-set .col-2 {
	width: 47%;
	float: left;
	margin-top: 50px;
	padding-bottom: 60px;
	position: relative;
}

.col2-set .col-1 {
	margin-right: 6%;
}

.col1-set {
	text-align: center;
	padding: 0 13%;
	font-weight: 300;
}

.green-b {
	background-image: url(../img/uu.jpg);
	background-color: #31d1b5;
	color: #fff;
	font-weight: 300;
}

.col1-set img {
	margin: 20px 0 0;
}

.col1-set .col1-content {
	max-width: 80%;
	padding: 0 10% 90px;
}

.col1-set .button {
	margin: 40px 0 0;
	
	position: relative;
}

.col1-set .button:hover,
.col1-set .button:focus {
	top: 2px;
	left: 2px;
}
.col1-set h1 {
	color: #ee3a43;
	padding-top: 70px;
}

.green-b h1 {
	color: #f7ecc7;
}

/*******************************************footer********************************************/

footer.main {
	font-family: 'Titan One', sans-serif;
	font-size: 20px;
}

footer.main a{
	color: #fff;
}

footer.main a:hover,
footer.main a:focus {
	color: #ee3a43;
}


footer.main .col2-set h1 {
	padding: 15px 0
}

footer.main .footer-bottom {
	font-size: 12px;
	min-height: 73px;
	background-color: #000;
	color: #fff;
}

footer.main .footer-bottom .footer-bottom-text {
	margin: 30px 30px 0 13%;
	float: left;
}

footer.main .footer-bottom .footer-bottom-text p {
	margin: 0;
}

footer.main .footer-bottom img {
	width: 30%;
	max-width: 150px;
	clear: right;
	margin: 25px 0;
}

/************************************************Kinderkrippe***************************************************************/

.content .subnavi {
	width: 20%;
	float: left;
	padding: 50px 0 50px 13%;
	font-size: 16px;
	position: sticky;
	top: 50px;
}

.content .subnavi-mobile {
	display: none;
	overflow: hidden;
	width: 100%;
	padding: 50px 0;
	font-size: 16px;
	text-align: center;
	background-color: #3598db;
}

.content .subnavi-mobile ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.content .subnavi-mobile ul li:before {
	content:"";
}

.content .subnavi ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.content .subnavi ul li:before {
	content:"";
}

.content .subnavi ul li a {
	padding: 7px 0;
	display: inline-block;
	width: 100%;
}

.content .subnavi .mobile-subnavi-header {
	display: none;
}

.content .subnavi .mobile-subnavi-header p {
	cursor: pointer;
	margin: 0;
}

.toggle {
	padding: 7px 0;
}

.content .subnavi a {
	color: #4e4e4e;
}

.content .subnavi a:hover,
.content .subnavi a:focus,
.content .subnavi a.active {
	color: #3598db;
}

.content .wrapper {
	width: 54%;
	float: right;
	padding: 30px 13% 40px 0;
}

.content .wrapper h1,
.content .wrapper h1 {
	color: #3598db;
}

.content .wrapper .ie8-list,
.content .wrapper .big-list {
	list-style: none;
	padding: 0 0 18px;
	margin: 0;
}

.content .wrapper .ie8-list li:before,
.content .wrapper .personen li:before,
.content .wrapper .big-list li:before {
	content:"";
}

.content .wrapper .ie8-list li,
.content .wrapper .big-list li {
	margin-bottom: 40px;
	font-weight: 300;
	display: list-item;
}

.content .wrapper .ie8-list li h2,
.content .wrapper .big-list li h2 {
	margin-top: 5px;
	padding: 0;
}

.content .wrapper .ie8-list li img,
.content .wrapper .big-list li img {
	width: 34%;
}

.content .wrapper .ie8-list li .text,
.content .wrapper .big-list li .text {
	width: 64%;
	float: right;
}

.content .wrapper .ie8-list li .text p,
.content .wrapper .big-list li .text p {
	margin-top: 10px;
}

.content .wrapper .ie8-list li .text p:last-child,
.content .wrapper .big-list li .text p:last-child {
	margin-bottom: 0;
}

.content .wrapper .ie8-list li .text h3,
.content .wrapper .big-list li .text h3 {
	font-size: 18px;
}

.content .wrapper .ie8-list li ul,
.content .wrapper .big-list li ul {
	list-style-type: none;
	padding-left: 20px;
}

.content .wrapper .ie8-list li ul li,
.content .wrapper .big-list li ul li {
	margin-bottom: 5px;
	position: relative;
	font-size: 16px;
}

.content .wrapper .ie8-list li ul li:before,
.content .wrapper .big-list li ul li:before {
	content: "-";
	position: absolute;
	left: -20px;
}

/*****************IE8*******************/

.ie8-list {
	display: none;
}

.no-js .ie8-list,
.ie-8 .ie8-list {
	display: block;
}

/*****************************************************Betreuung*****************************************************************/

.content .wrapper .centred li img {
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}

.content .wrapper .centred li h2 {
	margin-top: 0;
}

.content .wrapper .centred li .text {
	margin: auto 0;
	display: inline-block;
	vertical-align: top;
	float: none;
	width: 59%;
}

.content .wrapper .text .job {
	font-weight: 500;
}

.content .wrapper .round li img {
	border-radius: 50%;
}

.content .wrapper .round li a > img {
	width: 100%;
}

.content .wrapper .info li a {
	position: relative;
	width: 34%;
	display: inline-block;
	margin-right: 30px;
	transition: background-image 0.2s ease-in-out;
	cursor: pointer;
}

.content .wrapper .info li a::before {
	position: absolute;
	top:0;
	bottom:0;
	left: 0;
	right: 0;
	content: "";
	border-radius: 50%;
	background: #3598db url("../img/info.png") center no-repeat;
	opacity: 0;
	transition: opacity 0.3s ease 0s;
}

.content .wrapper .info li a:focus::before,
.content .wrapper .info li a:hover::before {
	opacity: 1;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

/*************************Kontaktformular*********************/


/***************************************KONTAKT********************************/

.contact-form {
	text-align: left;
	margin-bottom: 50px;
}

.contact-form .Kontaktformular {
	margin: 0 0 30px;
}

.contact-form dl dl{
	width: 100%;
	display: inline-block;
}

.contact-form dl dl dd:first-child {
	width:20%;
	float:left;
}

.contact-form dl dl dd {
	width:80%;
	float:right;
}

.contact-form .Kontaktformular dd {
	margin: 0;
}

.contact-form .Kontaktformular dd textarea,
.contact-form .Kontaktformular dd select,
.contact-form .Kontaktformular dd input {
	width: 100%;
	padding: 13px 25px;
	margin-bottom: 10px;
	border: 1px solid #f2f2f2;
	background-color: #f2f2f2;
	box-sizing: border-box;
	transition: border ease 0.4s;
}

.contact-form .Kontaktformular dd textarea:focus,
.contact-form .Kontaktformular dd select:focus,
.contact-form .Kontaktformular dd input:focus,
.contact-form .Kontaktformular dd textarea:hover,
.contact-form .Kontaktformular dd select:hover,
.contact-form .Kontaktformular dd input:hover {
	border: 1px solid #ee3a43;
}

.contact-form .submit {
	width: 90%;
	margin: 0 5%;
	max-width: 300px;
}

.contact-form .red {
	color: #ee3a43;
}

.contact-form .green {
	color: #47C9AF;
}

/*********************************AKTUELL************************************/

.termine-overview,
.news-overview {
	list-style: none;
	padding: 0;
}

.termine-overview li:before,
.news-overview li:before {
	content:"";
}

.termine-overview li h2,
.termine-overview li p {
	margin: 0;
}

.termine-overview li ,
.news-overview li h2 {
	margin: 0 0 25px;
}

.termine-overview li h2 a,
.news-overview li h2 a {
	color: #3598D8;
}

.termine-overview li h2 a:hover,
.termine-overview li h2 a:focus,
.news-overview li h2 a:focus,
.news-overview li h2 a:hover {
	color: #4e4e4e;
}
.galerie-overview,
.galerie-list {
	padding: 0;
	list-style: none;
}
.galerie-overview li:before,
.galerie-list li:before {
	content:"";
}

.galerie-overview li,
.galerie-list li {
	width: 31%;
	margin: 0 1% 15px;
	float: left;
}
.galerie-overview li img,
.galerie-list li img {
	width: 100%;
	border: 1px solid #4a4a4a;
	display:block;
}
.galerie-overview li h2 {
	white-space: nowrap;
	max-width: 100%;
	text-overflow: ellipsis;
	overflow: hidden;
	margin: 0 0 5px;
}
/**********************************TEAM*************************************************/
.personen {
	padding:0;
	margin-top:50px;
	margin-bottom:40px;
}
.personen-2 {
	display:none;
}
.personen.interactive {
	margin:0;
}
.personen li {
	margin-bottom:20px;
}
.personen.interactive li {
	margin-bottom:0;
	display:none;
}
.personen.interactive li.current {
	display:block;
}

.popup-head-team {
	width:100%;
	display:none;
}
.person-text {
	width:100%;
	
	display:none;
	padding: 0;
}





/********************************Popup*************************************/
/*POPUP*/
.popup-overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 9800;
	
	background-color: #3598db;
	display:none;
	opacity:0;
	
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.popup-overlay.open {
	display:block;
	opacity:0.9;
}

.popup-container {
	position: absolute;
	z-index: 9850;
	left: 50%;
	margin-left: -420px;
	width: 840px;
	border:1px solid #c7c7c6;
	
	background-color: #FFF;
	display:none;
	
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	
	opacity: 0;
	
	moz-transform: perspective(400px) translateZ(-400px);
	-webkit-transform: perspective(400px) translateZ(-400px);
	-o-transform: perspective(400px) translateZ(-400px);
	-ms-transform: perspective(400px) translateZ(-400px);
	transform: perspective(400px) translateZ(-400px);
}
.popup-container.open {
	display: block;
	opacity: 1;
	
	moz-transform: perspective(400px) translateZ(0px);
	-webkit-transform: perspective(400px) translateZ(0px);
	-o-transform: perspective(400px) translateZ(0px);
	-ms-transform: perspective(400px) translateZ(0px);
	transform: perspective(400px) translateZ(0px);
}

.popup-container .person-bild {
	display:block;
	padding-top:20px;
}

.popup-container .person-text {
	display: block;
}

.popup-head-team {
	display:none;
	line-height: 25px;
}

.popup-container .popup-head-team {
	display:block;
}

.popup-container .infotext {
	display:block;
}

.popup-container a.close {
	position: absolute;
	top: 15px;
	right: 15px;
	
	color:#ee3a43;
	font-size: 35px;
	line-height:25px;
	cursor:pointer;
}

.popup-container a.close:before {
	content: "\f00d";
	font-family: FontAwesome;
}

.popup-container .content {
	line-height:17px;
	min-height:250px;
	padding:25px;
}

@media only screen and (max-width : 900px) {
	.popup-container {
		margin-left: -48%;
		width: 96%;
	}
}

.person-text h2 {
	font-size: 16px;
	color: #000;
	font-family: 'Roboto', sans-serif;
}

h1.popup-head-team {
	font-size: 25px;
	color: #3598db;
}

.person-text table {
	margin-bottom: 50px;
}

.person-text tr td {
	padding: 7px 0;
	font-size: 15px;
	font-weight: 300;
	color: #000;
}

.person-text tr td:first-child {
	width: 100px;
	font-weight: bold;
	vertical-align: top;
}








/******************************************* MOBILE SUBNAV LINES *******************************************/
.mobile-subnavi-header {
	position: relative;
}

.mobile-subnavi-lines {
	display: block;
	position: absolute;
	right: 10px;
	top: 11px;
	
	cursor:pointer;
}

.content .subnavi .mobile-subnavi-lines span.first, .content .subnavi .mobile-subnavi-lines span.middle, .content .subnavi .mobile-subnavi-lines span.last {
	padding: 0;
	width: 25px;
	display: block;
	height: 4px;
	background-color: #FFF;
	margin-bottom: 3px;
	transition: 100ms ease-in-out;
}

.content .subnavi.expanded .mobile-subnavi-lines span.first {
	transform: translateY(7px) rotate(45deg);
	transition-delay: 33ms;
}

.content .subnavi.expanded .mobile-subnavi-lines span.last {
	transform: translateY(-7px) rotate(-45deg);
	transition-delay: 33ms;
}

.content .subnavi.expanded .mobile-subnavi-lines span.middle {
	opacity: 0;
}