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

@media screen and (max-width: 1535px) {
	header.main{
		width: 90%;
		padding: 0 0 0 10%;
	}
}

@media screen and (max-width: 1305px) {
	header.main nav.navi ul li a {
		padding: 23px 12px;
	}
	
	header.main{
		width: 95%;
		padding: 0 0 0 5%;
	}
	
	
	
	.content .wrapper {
		width: 65%;
		padding-right: 5%;
	}
	
	.content .subnavi {
		padding-left: 5%;
		width: 20%;
	}
	
	header.main,
	.col2-set,
	.col1-set,
	header.main .navicon,
	.content .subnavi {
		padding-left: 5%;
		padding-right: 5%;
	}
	
	footer.main .footer-bottom .footer-bottom-text {
		margin-left: 5%;
	}
}

@media .container and (max-height: 1px) {
	display: none;
}

/**********************************************************Home******************************************************************/

@media screen and (max-width: 1023px) {
	
	html {
		font-size: 15px;
	}
	
	h1 {
		text-transform: uppercase;
		font-size: 25px;
	}
	
	h2 {
		font-size: 18px;
		font-weight: 400;
		color: #3598d8;
	}
	
	footer.main {
		font-size: 18px;
	}
	
	header.main {
		width: 90%;
	}
	
	header.main .navicon {
		display: block;
	}
	
	header.main .navi {
		float: none;
		width: 100%;
		border: none;
		padding: 0;
		
		position: fixed;
		top: 78px;
		left: -100%;
		right: 100%;
		bottom: 0;
		z-index: 100;
		
		background-color: #ee3a43;
		transition: left 0.5s ease;
		
		font-weight: normal;
		font-size: 18px;
		text-transform: none;
		text-align: center;
	}
	
	header.main nav.navi ul li {
		width: 100%;
	}
	
	header.main nav.navi ul li a {
		color: #fff;
		border: none;
		padding: 7px 12px;
		font-size: 18px;
	}
	
	header.main nav.navi ul {
		padding: 40px 0;
	}
	
	header.main nav.navi ul .red a.active,
	header.main nav.navi ul .red a:hover,
	header.main nav.navi ul .red a:focus,
	
	header.main nav.navi ul .violett a.active,
	header.main nav.navi ul .violett a:hover,
	header.main nav.navi ul .violett a:focus,
	
	header.main nav.navi ul .turquoise a.active,
	header.main nav.navi ul .turquoise a:hover,
	header.main nav.navi ul .turquoise a:focus,
	
	header.main nav.navi ul .green a.active,
	header.main nav.navi ul .green a:hover,
	header.main nav.navi ul .green a:focus,
	
	header.main nav.navi ul .orange a.active,
	header.main nav.navi ul .orange a:hover,
	header.main nav.navi ul .orange a:focus,
	
	header.main nav.navi ul .yellow a.active,
	header.main nav.navi ul .yellow a:hover,
	header.main nav.navi ul .yellow a:focus,
	
	header.main nav.navi ul .blue a.active,
	header.main nav.navi ul .blue a:hover,
	header.main nav.navi ul .blue a:focus {
		color: #000;
	}
	
	.subnavi.expanded > ul {
		max-height: 500px;
	}
	
	.content .subnavi {
		width: 90%;
		margin: 0 5%;
		margin-bottom: 35px;
		padding-left: 0;
		position: static;
	}
	
	.subnavi > ul {
		max-height: 0px;
		overflow: hidden;
		transition: max-height 0.45s ease-in-out 0s;
	}
	
	.subnavi ul li {
		border-bottom: 1px solid #b0b0b0;
	}
	
	.toggle {
		padding: 0;
	}
	
	.mobile-subnavi-header .toggle:after {
		content: '';
		background-image: url("/img/arrow.png");
		background-repeat:no-repeat;
		margin-top: -3px;
		position: absolute;
		right: 20px;
		top: 50%;
		width: 12px;
		height: 6px;
		
		transition: all 0.45s ease-in-out 0s;
		transform-origin: top center;
	}	
	
	.expanded .mobile-subnavi-header .toggle:after {
		-moz-transform: rotate(180deg);
		-webkit-transform: rotate(180deg);
		-o-transform: rotate(180deg);
		-ms-transform: rotate(180deg);
		transform: rotate(180deg);
		margin-top: 3px;
	}
	
	.content .subnavi span {
		padding: 10px;
		display: block;
	}
	
	.content .subnavi ul li a {
		padding-left: 10px;
	}
	
	.mobile-subnavi-header {
		display: block;
		background-color: #3598db;
		position: relative;
		border: none;
		color: #fff;
		height: 40px;
	}
	
	.content .subnavi a:hover,
	.content .subnavi a:focus {
		color: #3598db;
	}
	.content .subnavi a.active {
		color: #fff;
	}
	
	header.main .navi a {
		color: #ae9d8f;
	}
	
	header.main .navi a.active,
	header.main .navi a:focus,
	header.main .navi a:hover {
		color: #000;
	}
	
	header.main .navi ul {
		float: none;
	}
	
	header.main .navi > ul > li {
		float: none;
		margin-left: 0;
		padding-bottom: 12px; 
	}
	
	.children {
		background-image: none;
		min-height: 0;
	}
	
	html {
		font-size: 16px;
	}
	
	.col2-set .col-1 {
		float: none;
	}
	
	.content .col2-set .col-1,
	.content .col2-set .col-2 {
		width: 100%;
		float: none;
		margin: 0;
		padding: 0 0 50px;
	}
	
	.footer .col2-set .col-1,
	.footer .col2-set .col-2 {
		padding-bottom: 20px;
	}
	
	.footer .col2-set .col-2 {
		margin-top: 0;
	}
	
	.content .col2-set .col-2 {
		border-top: 1px solid #3598db;
	}
	
	.col2-set .col-content {
		padding: 0 7%;
	}
	
	.col1-set .col1-content {
		padding: 0 0 50px;
		max-width: 100%
	}
	
	header.main nav.main {
		display: none;
		overflow: hidden;
	}
	
	.blue-b .col2-set .col-1,
	.blue-b .col2-set .col-2 {
		width: 100%;
		float: none;
		margin: 0;
		padding: 0 0 10px;
	}
}

@media screen and (max-width: 768px) {
	html {
		font-size: 16px;
	}
	
	.blue-b .col-2 h1 {
		padding: 5px 0 0;
	}
	
	.blue-b .col-1 h1 {
		padding-bottom: 0;
	}
	
	
	.content .emo h1 {
		right: 50px;
		font-size: 40px;
	}
	
	.col2-set dl dt {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

@media screen and (max-width: 600px) {	
	.person-text tr td {
		font-size: 14px;
	}
}

@media screen and (max-width: 530px) {
	html {
		font-size: 14px;
	}
	
	.content .emo {
		margin-top: 60px;
	}
	
	.content .emo h1 {
		font-size: 25px;
	}
	
	h1 {
		font-size: 20px;
		padding-bottom: 12px;
	}
	
	header.main .logo {
		width: 170px;
	}
	
	footer.main {
		font-size: 14px;
	}
	
	footer.main .footer-bottom img {
		margin-top: 27px;
	}
	
	.col2-set.blue .col-1 h1,
	.col2-set.blue .col-2 h1 {
		padding-bottom: 0;
	}
	
	.col2-set.blue .col-1 p,
	.col2-set.blue .col-2 p {
		margin: 5px 0 0 0;
	}
	
	.content .col2-set .col-1,
	.content .col2-set .col-2 {
		padding-bottom: 24px;
	}
	
	.col2-set .col-1 .button,
	.col2-set .col-2 .button {
		margin-top: 12px;
	}
	
	.col2-set dl dt {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.col1-set .col1-content {
		padding-bottom: 24px;
	}
	
	.col1-set .col1-content h1 {
		padding-top: 24px;
	}
	
	.col1-set .col1-content .button {
		margin-top: 12px;
	}
	
	.footer .footer-bottom {
		min-height: 0;
	}
	
	.footer .footer-bottom .footer-bottom-text {
		margin-top: 20px;
	}
	
	header.main nav.navi {
		top: 60px;
	}
	
	.content .subnavi {
		margin-bottom: 35px;
		padding: 30px 0 0;
	}
	
	.col2-set dl dt {
		width: 65%;
	}
	
	.contact-form dl dl dd:first-child {
		width:30%;
	}
	
	.contact-form dl dl dd {
		width:70%;
	}
}

@media screen and (max-width: 480px) {
	footer.main {
		text-align: center;
	}
	
	footer.main .footer-bottom .footer-bottom-text {
		padding: 20px 0 0;
		margin: 0;
		float: none;
	}
}

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

@media screen and (max-width: 1023px) {
	.content .side-bar {
		display: none;
		overflow: hidden;
	}
	
	.content .side-bar-mobile {
		display: inline-block;
		overflow: visible;
	}
	
	.content .wrapper {
		width: 90%;
		float: none;
		padding: 20px 5% 0;
	}
	
	.content .wrapper ul li .text {
		float: none;
		width: 100%;
		padding-bottom: 30px;
	}
	
	.content .wrapper ul li img {
		width: 50%;
	}
	
	.content .subnavi .mobile-subnavi-header {
		display: block;
	}
	
	li.active {
		display:none;
	}
	
	.big-list,
	.centred {
		text-align: center;
	}
	
	.content .wrapper .ie8-list li .text,
	.content .wrapper .big-list li .text {
		width: 100%;
	}
	
	.content {
		min-height: 500px;
	}
}

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


@media only screen and (max-width: 1023px) {
	.content .wrapper .info li a{
		margin-right: 0;
		width: 50%;
		max-width: 250px;
	}
	
	.content .wrapper ul li .text {
		padding: 0;
	}
	
	.content .wrapper .centred li .text {
		width: 100%;
		margin-top:20px;
	}
	
	.content .wrapper ul li .text .detail {
		display: none;
		overflow: hidden;
	}
}



/***********************NAVI********************/

@media only screen and (max-width: 800px) {
	@media only screen and (max-height: 450px) {
		header.main nav.navi ul li {
			width: 50%;
		}
	}
}

/****************************Lage************************************/

@media only screen and (max-width: 480px) {
	iframe {
		height: 250px;
	}
}

/**********************************Gallerie*********************************/

@media only screen and (max-width: 1023px) {
	.content .wrapper .galerie-overview li img,
	.content .wrapper .gallery ul li img {
		width: 100%;
	}
}
@media only screen and (max-width: 600px) {
	.content .wrapper .galerie-overview li,
	.content .wrapper .gallery ul li {
		width: 48%
	}
}
@media only screen and (max-width: 400px) {
	.content .wrapper .galerie-overview li,
	.content .wrapper .gallery ul li {
		width: 98%
	}
}